Iterate on the introduction of Inter

Small styling changes here and there. Among other things, the background is now less "blue".
webkom · Jan 29, 2023 · c60dcce · c60dcce
1 parent 2ee5763
commit c60dcce
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 59 deletions.
diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
@@ -130,7 +130,7 @@ const Footer = ({ loggedIn }: Props) => (
           Informasjonskapsler (cookies)
         </Link>
         <Link to="/pages/personvern/124-personvernserklring">
-          Personvernserklæring
+          Personvernerklæring
         </Link>
         <span>© {moment().year()} Abakus</span>
       </div>

diff --git a/app/components/Header/toggleTheme.css b/app/components/Header/toggleTheme.css
@@ -16,7 +16,7 @@
 }
 
 .moon:hover {
-  color: var(--color-blue-1);
+  color: var(--color-blue-8);
 }
 
 .sun:hover {

diff --git a/app/components/RandomQuote/RandomQuote.css b/app/components/RandomQuote/RandomQuote.css
@@ -13,9 +13,8 @@
 }
 
 .quoteText {
-  font-weight: 600;
+  font-weight: 500;
   font-size: 15px;
-  color: var(--color-dark-gray-3);
 }
 
 .quoteReactions {
@@ -32,5 +31,5 @@
 
 .rotateIcon {
   transform: rotate(360deg);
-  transition: 1s;
+  transition: var(--easing-slow);
 }
diff --git a/app/routes/overview/components/ArticleItem.css b/app/routes/overview/components/ArticleItem.css
@@ -19,8 +19,6 @@
   margin: 0 5px;
   line-height: 1.1;
   font-size: 1.2rem;
-  letter-spacing: 2px;
-  text-transform: uppercase;
   word-break: break-word;
 }
 

diff --git a/app/routes/overview/components/LatestReadme.css b/app/routes/overview/components/LatestReadme.css
@@ -7,6 +7,7 @@
 .heading {
   font-size: 27px;
   width: 100%;
+  color: var(--lego-font-color);
 }
 
 .thumb {

diff --git a/app/routes/quotes/components/AddQuote.tsx b/app/routes/quotes/components/AddQuote.tsx
@@ -52,40 +52,34 @@ const AddQuote = ({
 
           <div className={styles.clear} />
 
-          <Button
-            type="submit"
-            className={styles.submitQuote}
-            disabled={disabledButton}
-          >
+          <Button type="submit" disabled={disabledButton}>
             Send inn sitat
           </Button>
         </form>
       </div>
 
       <h2>Forhåndsvisning</h2>
-      <div className={styles.outerPreview}>
-        <h2>OVERHØRT</h2>
-        <div className={styles.innerPreview}>
-          <RandomQuote
-            fetchRandomQuote={() => Promise.resolve()}
-            addReaction={() => Promise.resolve()}
-            deleteReaction={() => Promise.resolve()}
-            fetchEmojis={() => Promise.resolve()}
-            fetchingEmojis={false}
-            emojis={[]}
-            currentQuote={{
-              id: 1,
-              text: text || 'Det er bare å gjøre det',
-              source: source || 'Esso',
-              approved: true,
-              contentTarget: '',
-              reactionsGrouped: [],
-              reactions: [],
-            }}
-            loggedIn={true}
-            useReactions={false}
-          />
-        </div>
+      <h3 className="u-ui-heading">Overhørt</h3>
+      <div className={styles.innerPreview}>
+        <RandomQuote
+          fetchRandomQuote={() => Promise.resolve()}
+          addReaction={() => Promise.resolve()}
+          deleteReaction={() => Promise.resolve()}
+          fetchEmojis={() => Promise.resolve()}
+          fetchingEmojis={false}
+          emojis={[]}
+          currentQuote={{
+            id: 1,
+            text: text || 'Det er bare å gjøre det',
+            source: source || 'Esso',
+            approved: true,
+            contentTarget: '',
+            reactionsGrouped: [],
+            reactions: [],
+          }}
+          loggedIn={true}
+          useReactions={false}
+        />
       </div>
     </div>
   );

diff --git a/app/routes/quotes/components/Quote.tsx b/app/routes/quotes/components/Quote.tsx
@@ -21,7 +21,6 @@ type Props = {
   displayAdmin: boolean;
   currentUser: any;
   loggedIn: boolean;
-  emojis: Array<EmojiEntity>;
   addReaction: (arg0: { emoji: string; contentTarget: string }) => Promise<any>;
   deleteReaction: (arg0: {
     reactionId: ID;

diff --git a/app/routes/quotes/components/Quotes.css b/app/routes/quotes/components/Quotes.css
@@ -41,18 +41,9 @@
   font-weight: 600;
 }
 
-.submitQuote {
-  padding: 10px 20px;
-  font-size: 14px;
-  margin: 10px 0 50px;
-}
-
-.submitQuote:disabled {
-  color: var(--color-mono-gray-3);
-}
-
 .addQuote {
   max-width: 550px;
+  margin-bottom: 3rem;
 }
 
 .addQuote label {
@@ -148,7 +139,7 @@
 }
 
 .singleQuote h3 a:hover {
-  color: var(--color-orange-3);
+  color: var(--color-orange-6);
 }
 
 .quoteDefault {
@@ -264,19 +255,8 @@
   }
 }
 
-.outerPreview {
-  background: var(--lego-background-color);
-  border-radius: 10px;
-  width: 560px;
-  padding: 100px;
-}
-
 .innerPreview {
-  composes: withShadow from '~app/styles/utilities.css';
-  background: var(--lego-card-color);
   width: 360px;
-  border-radius: 10px;
-  padding: 10px;
 }
 
 .select {

diff --git a/app/styles/variables.css b/app/styles/variables.css
@@ -4,7 +4,7 @@
 @custom-media --lego-max-width (max-width: 1100px);
 
 :root {
-  --lego-background-color: #f9fafe;
+  --lego-background-color: #fefefe;
   --lego-font-color: var(--color-gray-1);
   --lego-link-color: #c0392b;
   --lego-red: #c0392b;