From 5ed57c966a4a79a487f8b572a25d5e85db5fd2f3 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Fri, 15 Dec 2023 15:29:38 +0530
Subject: [PATCH] chore: change colors on button

---
 public/css/application.css       | 136 ++++++++++++-------------------
 public/images/strike-logo.svg    |   5 ++
 views/backends/strike/index.html |   7 +-
 3 files changed, 61 insertions(+), 87 deletions(-)
 create mode 100644 public/images/strike-logo.svg

diff --git a/public/css/application.css b/public/css/application.css
index 93a30a6f..14803d41 100644
--- a/public/css/application.css
+++ b/public/css/application.css
@@ -235,9 +235,7 @@ Use the modern Firefox focus style for all focusable elements.
 :-moz-focusring {
   outline: auto;
 }
-/*
-Css for logout button
-*/
+
 /*
 Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
@@ -749,9 +747,6 @@ select {
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
-.col-span-3 {
-  grid-column: span 3 / span 3;
-}
 
 .mx-auto {
   margin-left: auto;
@@ -828,20 +823,6 @@ select {
   margin-top: 5rem;
 }
 
-.mt-25{
-  margin-top: 6.75rem;
-}
-
-.mt-30{
-  margin-top: 7.5rem;
-}
-.mt-40{
-  margin-top: 10rem;
-}
-.right{
-  right: 0px;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -857,12 +838,7 @@ select {
 .block {
   display: block;
 }
-.absolute{
-  position: absolute;
-}
-.relative{
-  position: relative;
-}
+
 .inline {
   display: inline;
 }
@@ -886,18 +862,10 @@ select {
 .hidden {
   display: none;
 }
-/* to rotate arrow 180 deg */
-.rotate-180 {
-  transform: rotate(180deg);
-  margin-top: -6px;
-}
 
 .h-4 {
   height: 1rem;
 }
-.h-10{
-  height: 2.5rem;
-}
 
 .w-16 {
   width: 4rem;
@@ -955,6 +923,11 @@ select {
   table-layout: fixed;
 }
 
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1000,9 +973,7 @@ select {
 .justify-center {
   justify-content: center;
 }
-.justify-left{
-  justify-content: left;
-}
+
 .justify-between {
   justify-content: space-between;
 }
@@ -1058,9 +1029,7 @@ select {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
 }
-.rounded-circle{
-  border-radius: 50px;
-}
+
 .border {
   border-width: 1px;
 }
@@ -1095,15 +1064,6 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-gray-400 {
-    --tw-border-opacity: 1;
-    border-color: rgb(156 163 175 / var(--tw-border-opacity));
-  }
-
-.border-gray-900{
---tw-text-opacity: 1;
-  border-color: rgb(17 24 39 / var(--tw-text-opacity));
-}
 .border-purple-600 {
   --tw-border-opacity: 1;
   border-color: rgb(147 51 234 / var(--tw-border-opacity));
@@ -1154,13 +1114,24 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-gradient-to-tr {
+  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
+}
+
+.from-gray-900 {
+  --tw-gradient-from: #111827;
+  --tw-gradient-to: rgb(17 24 39 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-gray-700 {
+  --tw-gradient-to: #374151;
+}
+
 .bg-origin-border {
   background-origin: border-box;
 }
 
-.p-1{
-  padding: 0.3rem;
-}
 .p-2 {
   padding: 0.5rem;
 }
@@ -1177,10 +1148,7 @@ select {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
 }
-.px-2{
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1306,9 +1274,6 @@ select {
   font-size: 0.75rem;
   line-height: 1rem;
 }
-.font-normal{
-  font-weight: 400;
-}
 
 .font-bold {
   font-weight: 700;
@@ -1318,6 +1283,10 @@ select {
   font-weight: 500;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -1369,10 +1338,6 @@ select {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
-}
 .text-green-500 {
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity));
@@ -1383,6 +1348,11 @@ select {
   color: rgb(126 34 206 / var(--tw-text-opacity));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1483,12 +1453,16 @@ select {
   .dark\:divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
     border-color: rgb(255 255 255 / 0.1);
   }
-  .dark\:border-gray-200{
-    --tw-border-opacity: 0.3;
+
+  .dark\:border-gray-200 {
+    --tw-border-opacity: 1;
     border-color: rgb(229 231 235 / var(--tw-border-opacity));
   }
-  .dark\:
-  
+
+  .dark\:border-gray-400 {
+    --tw-border-opacity: 1;
+    border-color: rgb(156 163 175 / var(--tw-border-opacity));
+  }
 
   .dark\:border-gray-700 {
     --tw-border-opacity: 1;
@@ -1627,9 +1601,6 @@ select {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity));
   }
-  .dark\:fill{
-    fill:rgb(156 163 175 / var(--tw-border-opacity));
-  }
 }
 
 @media (min-width: 640px) {
@@ -1645,6 +1616,10 @@ select {
     margin-top: 0px;
   }
 
+  .sm\:inline {
+    display: inline;
+  }
+
   .sm\:w-\[250px\] {
     width: 250px;
   }
@@ -1653,18 +1628,10 @@ select {
     flex-direction: row;
   }
 
-  .sm\:inline{
-    display: inline;
-  }
-
   .sm\:justify-center {
     justify-content: center;
   }
 
-  .sm\:text-base {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
   .sm\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -1674,6 +1641,11 @@ select {
     font-size: 2.25rem;
     line-height: 2.5rem;
   }
+
+  .sm\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -1685,14 +1657,14 @@ select {
     display: flex;
   }
 
-  .md\:hidden{
-    display: none;
-  }
-
   .md\:table-cell {
     display: table-cell;
   }
 
+  .md\:hidden {
+    display: none;
+  }
+
   .md\:grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
diff --git a/public/images/strike-logo.svg b/public/images/strike-logo.svg
new file mode 100644
index 00000000..6fdc65e6
--- /dev/null
+++ b/public/images/strike-logo.svg
@@ -0,0 +1,5 @@
+<svg width="155" height="120" viewBox="0 0 155 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M7.06565 43.2477C1.90963 41.2685 -0.665684 35.4843 1.31353 30.3283C3.29274 25.1722 9.07699 22.5969 14.233 24.5761L51.4526 38.8634C51.4937 38.8798 51.535 38.896 51.5765 38.9119L70.2481 46.0792C75.4041 48.0584 81.1883 45.4831 83.1675 40.3271C85.1468 35.1711 82.5714 29.3868 77.4154 27.4076L77.4132 27.4068C77.4139 27.4064 77.4145 27.406 77.4151 27.4056L58.7436 20.2383C53.5876 18.2591 51.0123 12.4749 52.9915 7.31885C54.9707 2.16283 60.755 -0.412485 65.911 1.56673L120.828 22.6473C120.959 22.6977 121.089 22.7506 121.217 22.8059C121.453 22.8928 121.69 22.9815 121.926 23.0721C147.706 32.9681 160.583 61.8894 150.686 87.6695C140.79 113.45 111.869 126.326 86.089 116.43C85.5927 116.24 85.1011 116.042 84.6144 115.838C84.3783 115.766 84.1431 115.686 83.9091 115.596L30.0742 94.9308C24.9182 92.9516 22.3428 87.1673 24.3221 82.0113C26.3013 76.8553 32.0855 74.2799 37.2415 76.2592L55.9106 83.4256C55.9103 83.4242 55.9099 83.4229 55.9095 83.4215L55.9133 83.423C61.0694 85.4022 66.8536 82.8269 68.8328 77.6709C70.812 72.5148 68.2367 66.7306 63.0807 64.7514L54.6786 61.5261C54.6787 61.5257 54.6788 61.5252 54.6789 61.5247L7.06565 43.2477Z"
+    fill="white"></path>
+</svg>
\ No newline at end of file
diff --git a/views/backends/strike/index.html b/views/backends/strike/index.html
index 595726d2..2cc73364 100644
--- a/views/backends/strike/index.html
+++ b/views/backends/strike/index.html
@@ -19,14 +19,11 @@ <h2 class="text-md text-gray-700 dark:text-neutral-300">
 
   <p class="my-8">
     <a
-      class=" inline-flex cursor-pointer items-center justify-center rounded-md transition-all px-10 py-4 text-black"
-      style="
-        background: linear-gradient(180deg, #ffde6e 63.72%, #f8c455 95.24%);
-      "
+      class=" inline-flex cursor-pointer items-center justify-center rounded-md transition-all px-10 py-4 text-white bg-gradient-to-tr from-gray-900 to-gray-700"
       href="/strike/auth?v202303281"
     >
       <img
-        src="/public/images/alby-head.svg"
+        src="/public/images/strike-logo.svg"
         width="400"
         height="400"
         class="w-[24px] mr-2"