frontend: experimental

Author: thisconnect

frontends/web/src/components/actionable-item/actionable-item.module.css

@@ -1,5 +1,5 @@
 .container {
-  --size-default: 1.4rem;
+  --size-default: min(1.4rem, 24px);
   align-items: center;
   background-color: var(--background-secondary);
   border: none;

frontends/web/src/components/dropdown/dropdown.module.css

@@ -57,6 +57,8 @@
 .select :global(.react-select__control) {
     background-color: var(--background-secondary);
     border-radius: 0.2rem;
+    border-width: 0.1rem;
+    min-height: var(--input-height);
     padding: var(--space-quarter) var(--space-eight);
 }
 

frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css

@@ -6,6 +6,7 @@
 }
 
 .balanceSingleValue {
+    margin-left: var(--space-quarter);
     margin-right: var(--space-quarter);
 }
 
@@ -26,12 +27,13 @@
 }
 
 .select {
+    font-size: min(var(--size-default), 24px);
     margin-bottom: var(--space-half);
 }
 
 .select :global(.react-select__group-heading) {
     color: var(--color-default);
-    font-size: var(--size-default);
+    font-size: min(var(--size-default), 24px);
     margin: 0;
     padding-right: var(--space-quarter);
     text-transform: unset;
@@ -72,6 +74,7 @@
 
 .select :global(.react-select__control) {
     background-color: var(--background-secondary);
+    min-height: var(--input-height);
     padding: var(--space-quarter) var(--space-eight);
 }
 

frontends/web/src/components/groupedaccountselector/groupedaccountselector.tsx

@@ -62,7 +62,11 @@ const SelectSingleValue = (props: SingleValueProps<TOption>) => {
           {coinCode ? <Logo coinCode={coinCode} alt={coinCode} /> : null}
           <span className={styles.selectLabelText}>{label}</span>
           {insured && <InsuredShield/>}
-          {coinCode && balance && <span className={styles.balanceSingleValue}>{hideAmounts ? `*** ${coinCode}` : balance}</span>}
+          {coinCode && balance && (
+            <span className={styles.balanceSingleValue}>
+              {hideAmounts ? `*** ${coinCode}` : balance}
+            </span>
+          )}
         </div>
       </components.SingleValue>
     </div>

frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css

@@ -9,8 +9,8 @@
 .pillbuttongroup button {
 	appearance: none;
 	background: var(--background-secondary);
-	border: 0.2rem solid var(--background-secondary);
-	border-radius: 32px;
+	border: 0.1rem solid var(--background-secondary);
+	border-radius: 36px;
 	color: var(--color-default);
 	font-size: min(var(--size-default), 18px);
 	line-height: 1.75;
@@ -21,8 +21,8 @@
 }
 
 .pillbuttongroup.large button {
-	font-size: calc(var(--size-default) + 1px);
-	padding: 2px calc(var(--spacing-default) * 1.5);
+	font-size: min(calc(var(--size-default) + 1px), 24px);
+	padding: 2px 36px;
 }
 
 .pillbuttongroup button:hover:not([disabled]) {
@@ -55,10 +55,3 @@
 	border-color: var(--background-secondary);
 	color: var(--color-disabled);
 }
-
-@media (max-width: 768px) {
-	.pillbuttongroup.lg button {
-		font-size: var(--size-default);
-		padding: 2px calc(var(--spacing-default) * 1.25);
-	}	
-}

frontends/web/src/components/terms/terms.module.css

@@ -1,4 +1,5 @@
 .disclaimerContainer {
+  --size-default: min(1.4rem, 24px);
   align-items: center;
   display: flex;
   flex-basis: 100%;
@@ -21,17 +22,17 @@
   margin: 0 0 var(--space-default) 0;
   max-width: 660px;
   overflow: auto;
-  padding: var(--space-quarter) 1em 1em 1em;
+  padding: var(--space-quarter) var(--space-half) var(--space-half) var(--space-half);
 }
 
 .title {
-  font-size: 1.4rem;
+  font-size: var(--size-default);
   font-weight: bold;
   text-align: left;
 }
 
 .disclaimer p {
-  font-size: 1.4rem;
+  font-size: var(--size-default);
   line-height: 1.5;
 }
 
@@ -45,7 +46,7 @@
 
 .table table {
   border-collapse: collapse;
-  font-size: 1.4rem;
+  font-size: var(--size-default);
   text-align: left;
 }
 
@@ -64,6 +65,11 @@
   padding-left: 0;
 }
 
+.table td:last-child,
+.table th:last-child {
+  padding-right: 0;
+}
+
 .nowrap {
   white-space: nowrap;
 }

frontends/web/src/style/variables.css

@@ -58,7 +58,7 @@
     --size-xsmall: 1.1rem;
     --size-label: var(--size-small);
     --size-button: var(--size-default);
-    --size-title: 3.2rem;
+    --size-title: min(3.2rem, 36px);
 
     /* wizard */
     --size-wizard-text: 1.6rem;
@@ -94,7 +94,7 @@
 
     /* header */
     --header-height: 70px;
-    --header-default-font-size: 2.4rem;
+    --header-default-font-size: min(2.4rem, 36px);
 
     /* content */
     --content-width: 1080px;
@@ -207,17 +207,17 @@
 
 @media (max-width: 1199px) {
     :root {
-        --size-title: 1.8rem;
+        --size-title: min(1.8rem, 36px);
     }
 }
 
 @media (max-width: 768px) {
     :root {
-        --header-default-font-size: 2rem;
+        --header-default-font-size: min(2rem, 36px);
         --size-subheader: 1.6rem;
-        --size-title: 1.6rem;
+        --size-title: min(1.6rem, 36px);
 
         --size-wizard-text: 1.4rem;
-        --size-default: 1.6rem;
+        --size-default: min(1.6rem, 36px);
     }
 }