chore: change colors on button

getAlby · Dec 15, 2023 · 5ed57c9 · 5ed57c9
1 parent 585472b
commit 5ed57c9
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 87 deletions.
diff --git 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
diff --git 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"