chore: generalize box layout

common-voice · Feb 12, 2022 · e35138f · e35138f
1 parent 61739c5
commit e35138f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 13 deletions.
diff --git a/web/css/root.css b/web/css/root.css
@@ -218,23 +218,22 @@ form button:not(.standalone) {
   font-size: 0.7rem;
 }
 
-.success-box {
+.box {
   margin: 1.5rem 0;
   padding: 1rem;
+}
+
+.box.success {
   border: 2px solid var(--success-border-color);
   background-color: var(--success-background-color);
 }
 
-.error-box {
-  margin: 1.5rem 0;
-  padding: 1rem;
+.box.error {
   border: 2px solid var(--error-border-color);
   background-color: var(--error-background-color);
 }
 
-.warning-box {
-  margin: 1.5rem 0;
-  padding: 1rem;
+.box.warning {
   border: 2px solid var(--warning-border-color);
   background-color: var(--warning-background-color);
 }

diff --git a/web/src/components/error.tsx b/web/src/components/error.tsx
@@ -10,13 +10,13 @@ export default function Error({ translationKey, children }: Props) {
   if (translationKey) {
     return (
       <Localized id={translationKey}>
-        <div className="error-box"></div>
+        <div className="error box"></div>
       </Localized>
     );
   }
 
   if (children) {
-    return <div className="error-box">{children}</div>;
+    return <div className="error box">{children}</div>;
   }
 
   return null;

diff --git a/web/src/components/profile/settings.tsx b/web/src/components/profile/settings.tsx
@@ -67,7 +67,7 @@ export default function Settings() {
                 ),
               }}
             >
-              <div className="warning-box"></div>
+              <div className="warning box"></div>
             </Localized>
           )}
         </section>

diff --git a/web/src/components/success.tsx b/web/src/components/success.tsx
@@ -12,21 +12,21 @@ export default function Success({ translationKey, vars, children }: Props) {
   if (translationKey && !hasVars) {
     return (
       <Localized id={translationKey}>
-        <div className="success-box"></div>
+        <div className="success box"></div>
       </Localized>
     );
   }
 
   if (translationKey && hasVars) {
     return (
       <Localized id={translationKey} vars={vars}>
-        <div className="success-box"></div>
+        <div className="success box"></div>
       </Localized>
     );
   }
 
   if (children) {
-    return <div className="success-box">{children}</div>;
+    return <div className="success box">{children}</div>;
   }
 
   return null;