refactor(wizard): adjust fonts and sizes

ubilabs · Aug 10, 2023 · 20ef1aa · 20ef1aa
1 parent 7258b85
commit 20ef1aa
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 7 deletions.
diff --git a/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.module.styl b/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.module.styl
@@ -9,7 +9,7 @@
   grid-area: 1 / 1 / 3 / 2
 
 .listTitle
-  margin-bottom: 0
+  margin: 0
   font-weight: 700
   font-style: normal
   font-size: emCalc(16px)

diff --git a/src/scripts/components/main/embed-result/embed-result.module.styl b/src/scripts/components/main/embed-result/embed-result.module.styl
@@ -1,12 +1,20 @@
 @require '../../../../variables.styl'
 
 .result
+  display: grid
   grid-area: 2 / 1 / 3 / 2
+  gap: emCalc(24px)
 
 .resultItem
   display: flex
   flex-direction: column
 
+.resultTitle
+  margin-top: 0
+  font-weight: 700
+  font-size: emCalc(16px)
+  font-family: Arial
+
 .embedTextArea, .embedLinkTextArea
   padding: emCalc(16px)
   height: emCalc(171px)

diff --git a/src/scripts/components/main/embed-result/embed-result.tsx b/src/scripts/components/main/embed-result/embed-result.tsx
@@ -45,7 +45,7 @@ const EmbedResult: FunctionComponent<Props> = ({paramsString}) => {
   return (
     <div className={styles.result}>
       <div className={styles.resultItem}>
-        <h2>
+        <h2 className={styles.resultTitle}>
           <FormattedMessage id={'embedCode'} />
         </h2>
         <textarea
@@ -63,7 +63,7 @@ const EmbedResult: FunctionComponent<Props> = ({paramsString}) => {
       </div>
 
       <div className={styles.resultItem}>
-        <h2>
+        <h2 className={styles.resultTitle}>
           <FormattedMessage id={'embedLink'} />
         </h2>
         <textarea

diff --git a/src/scripts/components/main/embed-settings/embed-settings.module.styl b/src/scripts/components/main/embed-settings/embed-settings.module.styl
@@ -2,9 +2,9 @@
 
 .settings
   display: grid
-  column-gap: emCalc(8px)
-  grid-template-columns: repeat(2, 1fr)
-  grid-template-rows: repeat(3, 1fr)
+  column-gap: emCalc(24px)
+  grid-template-columns: repeat(2, auto)
+  grid-template-rows: repeat(3, auto)
   row-gap: emCalc(24px)
 
 .title

diff --git a/src/scripts/components/main/embed-wizard/embed-wizard.module.styl b/src/scripts/components/main/embed-wizard/embed-wizard.module.styl
@@ -18,12 +18,19 @@
   color: $textWhite
   column-gap: emCalc(50px)
   grid-template-columns: repeat(2, auto)
-  grid-template-rows: repeat(3, auto) 1px auto
+  grid-template-rows: repeat(2, auto) 1px auto
   row-gap: emCalc(20px)
 
 .header
   grid-area: 1 / 1 / 2 / 3
 
+  h1
+    font-weight: 700
+    font-style: normal
+    font-size: 36px
+    font-family: NotesEsa
+    line-height: 36px
+
 .divider
   width: 100%
   height: 1px