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/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,20 +9,21 @@
 .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;
+	margin-bottom: var(--spacing-half);
 }
 
 .pillbuttongroup.medium button {
 	padding: 0 12px;
 }
 
 .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 24px;
 }
 
 .pillbuttongroup button:hover:not([disabled]) {
@@ -55,10 +56,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

@@ -50,11 +50,11 @@
     /* font sizes */
     --size-large: 3.2rem;
     --size-header: 2.4rem;
-    --size-subheader: 1.8rem;
+    --size-subheader: min(1.8rem, 36px);
     --size-default: 1.4rem;
     --size-small:  min(1.2rem, 20px);
     --size-xsmall: 1.1rem;
-    --size-title: 3.2rem;
+    --size-title: min(3.2rem, 36px);
 
     /* spacing */
     --spacing-large: 32px;
@@ -87,10 +87,7 @@
 
     /* header */
     --header-height: 70px;
-<<<<<<< HEAD
-=======
-    --header-default-font-size: 2.4rem;
->>>>>>> 991216109 (frontend: implement responsive font-size using 62.5% trick)
+    --header-default-font-size: min(2.4rem, 36px);
 
     /* content */
     --content-width: 1080px;
@@ -203,15 +200,15 @@
 
 @media (max-width: 1199px) {
     :root {
-        --size-title: 1.8rem;
+        --size-title: min(1.8rem, 36px);
     }
 }
 
 @media (max-width: 768px) {
     :root {
-        --size-header: 2rem;
-        --size-subheader: 1.6rem;
-        --size-title: 1.6rem;
-        --size-default: 1.6rem;
+        --size-header: min(2rem, 36px);
+        --size-subheader: min(1.6rem, 36px);
+        --size-title: min(1.6rem, 36px);
+        --size-default: min(1.6rem, 36px);
     }
 }