refactor: simplify CollaboratorsSelector styles

joinmarket-webui · Nov 30, 2022 · b4d5a27 · b4d5a27
1 parent e5e5c05
commit b4d5a27
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 41 deletions.
diff --git a/src/components/Send.jsx b/src/components/Send.jsx
@@ -85,32 +85,22 @@ const CollaboratorsSelector = ({ numCollaborators, setNumCollaborators, minNumCo
   }
 
   return (
-    <rb.Form noValidate className={styles['collaborators-selector']} disabled={disabled}>
+    <rb.Form noValidate className={styles.collaboratorsSelector} disabled={disabled}>
       <rb.Form.Group>
         <rb.Form.Label className="mb-0">{t('send.label_num_collaborators', { numCollaborators })}</rb.Form.Label>
         <div className="mb-2">
           <rb.Form.Text className="text-secondary">{t('send.description_num_collaborators')}</rb.Form.Text>
         </div>
-        <div className={`${styles['collaborators-selector-flex']} d-flex flex-row flex-wrap`}>
+        <div className="d-flex flex-row flex-wrap gap-2">
           {defaultCollaboratorsSelection.map((number) => {
+            const isSelected = !usesCustomNumCollaborators && numCollaborators === number
             return (
               <rb.Button
                 key={number}
                 variant={settings.theme === 'light' ? 'white' : 'dark'}
-                className={classNames(
-                  styles['collaborators-selector-button'],
-                  'p-2',
-                  'border',
-                  'border-1',
-                  'rounded',
-                  'text-center',
-                  {
-                    'border-dark':
-                      !usesCustomNumCollaborators && numCollaborators === number && settings.theme === 'light',
-                    [styles['selected-dark']]:
-                      !usesCustomNumCollaborators && numCollaborators === number && settings.theme !== 'light',
-                  }
-                )}
+                className={classNames(styles.collaboratorsSelectorElement, 'border', 'border-1', {
+                  [styles.selected]: isSelected,
+                })}
                 onClick={() => {
                   setUsesCustomNumCollaborators(false)
                   setNumCollaborators(number)
@@ -128,18 +118,9 @@ const CollaboratorsSelector = ({ numCollaborators, setNumCollaborators, minNumCo
             isInvalid={!isValidNumCollaborators(numCollaborators, minNumCollaborators)}
             placeholder={t('send.input_num_collaborators_placeholder')}
             defaultValue=""
-            className={classNames(
-              styles['collaborators-selector-input'],
-              'p-2',
-              'border',
-              'border-1',
-              'rounded',
-              'text-center',
-              {
-                'border-dark': usesCustomNumCollaborators && settings.theme === 'light',
-                [styles['selected-dark']]: usesCustomNumCollaborators && settings.theme !== 'light',
-              }
-            )}
+            className={classNames(styles.collaboratorsSelectorElement, 'border', 'border-1', {
+              [styles.selected]: usesCustomNumCollaborators,
+            })}
             onChange={(e) => {
               setUsesCustomNumCollaborators(true)
               validateAndSetCustomNumCollaborators(e.target.value)

diff --git a/src/components/Send.module.css b/src/components/Send.module.css
@@ -113,28 +113,26 @@ input[type='number'] {
   width: 100%;
 }
 
-.collaborators-selector-button {
+.collaboratorsSelectorElement {
   min-width: 6rem;
   flex: 1;
+  padding: 0.5rem;
+  text-align: center;
+  border-radius: var(--bs-border-radius);
 }
 
-.collaborators-selector-input {
-  min-width: 6rem;
-  flex: 1;
-}
-
-:root[data-theme='dark'] .collaborators-selector-input {
+:root[data-theme='dark'] input.collaboratorsSelectorElement {
   background-color: var(--bs-gray-800);
   color: var(--bs-white);
 }
 
-:root[data-theme='dark'] .collaborators-selector .selected-dark {
-  background-color: var(--bs-gray-dark);
-  border-color: var(--bs-gray-dark) !important;
+.collaboratorsSelectorElement.selected {
+  border-color: var(--bs-dark-rgb) !important;
 }
 
-.collaborators-selector-flex {
-  gap: 0.5rem;
+:root[data-theme='dark'] .collaboratorsSelectorElement.selected {
+  background-color: var(--bs-gray-dark);
+  border-color: var(--bs-gray-dark) !important;
 }
 
 .input-loader {
@@ -146,7 +144,7 @@ input[type='number'] {
   filter: blur(2px);
 }
 
-.service-running .collaborators-selector {
+.service-running .collaboratorsSelector {
   filter: blur(2px);
 }