feat: style adjustments, icons updated

packages/console/app/src/routes/black.css

@@ -259,7 +259,7 @@
 
         &[data-collapsed="true"] {
           [data-slot="card-trigger"] {
-            padding: 16px 24px;
+            padding: 20px 24px;
           }
 
           [data-slot="plan-header"] {
@@ -267,20 +267,11 @@
           }
 
           [data-slot="amount"] {
-            font-size: 18px;
-          }
-
-          [data-slot="period"],
-          [data-slot="multiplier"] {
-            font-size: 13px;
+            font-size: 20px;
           }
         }
 
         &[data-selected="false"][data-collapsed="false"] {
-          [data-slot="plan-header"] {
-            gap: 12px;
-          }
-
           [data-slot="amount"] {
             font-size: 22px;
           }
@@ -309,6 +300,7 @@
           flex-wrap: wrap;
           align-items: baseline;
           gap: 8px;
+          line-height: 24px;
           margin: 0;
         }
 
@@ -359,7 +351,7 @@
         [data-slot="terms"] li {
           color: rgba(255, 255, 255, 0.59);
           font-size: 13px;
-          line-height: 1.3;
+          line-height: 1.2;
           padding-left: 16px;
           position: relative;
           white-space: nowrap;
@@ -395,15 +387,20 @@
           font-weight: 400;
           text-decoration: none;
           cursor: pointer;
+          transition-property: background-color, border-color;
+          transition-duration: 200ms;
+          transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1);
         }
 
         [data-slot="cancel"] {
-          background: transparent;
-          border: 1px solid rgba(255, 255, 255, 0.17);
+          border: 1px solid var(--border-base, rgba(255, 255, 255, 0.17));
+          background: var(--surface-raised-base, rgba(255, 255, 255, 0.06));
+          background-clip: border-box;
           color: rgba(255, 255, 255, 0.92);
 
           &:hover {
-            border-color: rgba(255, 255, 255, 0.35);
+            background: var(--surface-raised-base, rgba(255, 255, 255, 0.08));
+            border-color: rgba(255, 255, 255, 0.25);
           }
         }
 

packages/console/app/src/routes/black/common.tsx

@@ -15,30 +15,46 @@ export function PlanIcon(props: { plan: string }) {
       <Match when={props.plan === "20"}>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <title>Black 20 plan</title>
-          <rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="1.5" />
+          <rect x="0.5" y="0.5" width="23" height="23" stroke="currentColor" />
         </svg>
       </Match>
       <Match when={props.plan === "100"}>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <title>Black 100 plan</title>
-          <rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5" />
-          <rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5" />
-          <rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5" />
-          <rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5" />
+          <rect x="0.5" y="0.5" width="9" height="9" stroke="currentColor" />
+          <rect x="0.5" y="14.5" width="9" height="9" stroke="currentColor" />
+          <rect x="14.5" y="0.5" width="9" height="9" stroke="currentColor" />
+          <rect x="14.5" y="14.5" width="9" height="9" stroke="currentColor" />
         </svg>
       </Match>
       <Match when={props.plan === "200"}>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <title>Black 200 plan</title>
-          <rect x="2" y="2" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
-          <rect x="10" y="2" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
-          <rect x="18" y="2" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
-          <rect x="2" y="10" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
-          <rect x="10" y="10" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
-          <rect x="18" y="10" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
-          <rect x="2" y="18" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
-          <rect x="10" y="18" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
-          <rect x="18" y="18" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1" />
+          <rect x="0.5" y="0.5" width="3" height="3" stroke="currentColor" />
+          <rect x="0.5" y="5.5" width="3" height="3" stroke="currentColor" />
+          <rect x="0.5" y="10.5" width="3" height="3" stroke="currentColor" />
+          <rect x="0.5" y="15.5" width="3" height="3" stroke="currentColor" />
+          <rect x="0.5" y="20.5" width="3" height="3" stroke="currentColor" />
+          <rect x="5.5" y="0.5" width="3" height="3" stroke="currentColor" />
+          <rect x="5.5" y="5.5" width="3" height="3" stroke="currentColor" />
+          <rect x="5.5" y="10.5" width="3" height="3" stroke="currentColor" />
+          <rect x="5.5" y="15.5" width="3" height="3" stroke="currentColor" />
+          <rect x="5.5" y="20.5" width="3" height="3" stroke="currentColor" />
+          <rect x="10.5" y="0.5" width="3" height="3" stroke="currentColor" />
+          <rect x="10.5" y="5.5" width="3" height="3" stroke="currentColor" />
+          <rect x="10.5" y="10.5" width="3" height="3" stroke="currentColor" />
+          <rect x="10.5" y="15.5" width="3" height="3" stroke="currentColor" />
+          <rect x="10.5" y="20.5" width="3" height="3" stroke="currentColor" />
+          <rect x="15.5" y="0.5" width="3" height="3" stroke="currentColor" />
+          <rect x="15.5" y="5.5" width="3" height="3" stroke="currentColor" />
+          <rect x="15.5" y="10.5" width="3" height="3" stroke="currentColor" />
+          <rect x="15.5" y="15.5" width="3" height="3" stroke="currentColor" />
+          <rect x="15.5" y="20.5" width="3" height="3" stroke="currentColor" />
+          <rect x="20.5" y="0.5" width="3" height="3" stroke="currentColor" />
+          <rect x="20.5" y="5.5" width="3" height="3" stroke="currentColor" />
+          <rect x="20.5" y="10.5" width="3" height="3" stroke="currentColor" />
+          <rect x="20.5" y="15.5" width="3" height="3" stroke="currentColor" />
+          <rect x="20.5" y="20.5" width="3" height="3" stroke="currentColor" />
         </svg>
       </Match>
     </Switch>