Refactor some styles

client/.postcssrc.json

@@ -3,6 +3,7 @@
     "postcss-import": {},
     "postcss-nested": {},
     "postcss-url": {},
+    "postcss-reuse": {},
     "autoprefixer": {}
   }
 }

client/package.json

@@ -101,6 +101,7 @@
     "portfinder": "^1.0.13",
     "postcss-import": "^15.0.0",
     "postcss-nested": "^6.0.1",
+    "postcss-reuse": "^2.2.0",
     "postcss-url": "^10.1.3",
     "prettier": "2.8.2",
     "rangy": "^1.3.1",

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="feedback__submission submission-form-container">
+  <div class="feedback__submission form-with-border submission-form-container">
     <div class="submission-form-container__inputs">
       <submission-input
         :input-text="userInput.text"
@@ -116,8 +116,6 @@ const changeDocumentUrl = (documentUrl: string) => {
 @import 'styles/helpers';
 
 .submission-form-container {
-  @include form-with-border;
-
   margin-bottom: $medium-spacing;
 
   display: none;

client/src/components/content-blocks/assignment/SubmissionInput.vue

@@ -7,7 +7,7 @@
       :class="{ 'submission-form__textarea--readonly': readonly }"
       data-cy="submission-textarea"
       rows="1"
-      class="submission-form__textarea"
+      class="borderless-textarea"
       v-auto-grow
       @input="input"
     />
@@ -58,10 +58,6 @@ const input = (e: Event) => {
   flex-direction: row;
   justify-content: space-between;
 
-  &__textarea {
-    @include borderless-textarea;
-  }
-
   &__save-status {
     position: relative;
     align-items: center;

client/src/components/rooms/CommentInput.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="comment-input">
+  <div class="form-with-border comment-input">
     <emoji-bar @add-emoji="addEmoji" />
     <textarea
       :value="text"
       data-cy="comment-textarea"
-      class="comment-input__textarea"
+      class="borderless-textarea"
       placeholder="Kommentar erfassen"
       v-auto-grow
       @input="updateValue($event.target.value)"
@@ -50,15 +50,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-@import 'styles/helpers';
-
-.comment-input {
-  @include form-with-border;
-
-  &__textarea {
-    @include borderless-textarea;
-  }
-}
-</style>

client/src/main.ts

@@ -3,8 +3,8 @@ import setupApp from './setup/setupApp';
 import registerPlugins from './setup/plugins';
 import setupRouteGuards from './setup/router';
 import registerDirectives from './setup/directives';
+import '@/styles/css/main.css';
 import '@/styles/main.scss';
-import '@/styles/variables.css';
 
 const app = setupApp();
 

client/src/styles/_mixins.scss

@@ -36,6 +36,7 @@
       background-color: $color-accent-1-dark;
     }
   }
+
   &--blue {
     background-color: $color-accent-2;
 
@@ -43,6 +44,7 @@
       background-color: $color-accent-2-dark;
     }
   }
+
   &--red {
     background-color: $color-accent-3;
 
@@ -50,6 +52,7 @@
       background-color: $color-accent-3-dark;
     }
   }
+
   &--green {
     background-color: $color-accent-4;
 

client/src/styles/css/components.css

@@ -0,0 +1,26 @@
+.input-box-shadow {
+  border: 1px solid #dbdbdb;
+  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+}
+
+.form-with-border {
+  @reuse .input-box-shadow;
+  background-color: var(--color-white);
+  border-radius: var(--input-border-radius);
+  border: 1px solid var(--color-silver);
+  padding: var(--medium-spacing);
+}
+
+.borderless-textarea {
+  display: flex;
+  width: 95%;
+  padding: 0;
+  box-sizing: border-box;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  line-height: 1.5;
+  border: 0;
+  min-height: 110px;
+  resize: none;
+  outline: 0;
+}

client/src/styles/css/main.css

@@ -0,0 +1,3 @@
+@import './variables.css';
+@import './typography.css';
+@import './components.css';

client/src/styles/css/typography.css

@@ -0,0 +1,44 @@
+/* as we will be moving away from SCSS and towards tailwind, here's a middle step: using classes for typography instead
+* of always using individual classes together with mixins */
+.main-title {
+  font-family: var(--sans-serif-font-family);
+  font-weight: var(--bold-font-weight);
+  font-size: var(--largest-font-size);
+}
+
+.heading-1 {
+  font-family: var(--sans-serif-font-family);
+  font-weight: var(--semibold-font-weight);
+  font-size: var(--larger-font-size);
+}
+
+.heading-2 {
+  font-family: var(--sans-serif-font-family);
+  font-weight: var(--semibold-font-weight);
+  font-size: var(--large-font-size);
+}
+
+.heading-3 {
+  font-family: var(--sans-serif-font-family);
+  font-weight: var(--semibold-font-weight);
+  font-size: var(--slightly-large-font-size);
+}
+
+.heading-4 {
+  font-family: var(--sans-serif-font-family);
+  font-weight: var(--semibold-font-weight);
+  font-size: var(--regular-font-size);
+}
+
+.regular-text {
+  font-family: var(--sans-serif-font-family);
+  font-weight: var(--regular-font-weight);
+  font-size: var(--regular-font-size);
+}
+
+.paragraph {
+  font-family: var(--serif-font-family);
+  font-size: var(--regular-font-size);
+  font-weight: var(--regular-font-weight);
+  line-height: var(--paragraph-line-height);
+}

client/src/styles/css/variables.css

@@ -0,0 +1,43 @@
+:root {
+  --default-border-radius: 13px;
+  --input-border-radius: 3px;
+
+  --section-spacing: 60px;
+  --large-spacing: 30px;
+  --medium-spacing: 20px;
+  --small-spacing: 10px;
+
+  --mark-alpha: #fbf44a;
+  --mark-beta: #FF8BDE;
+  --mark-gamma: #6FDCFF;
+
+  --color-white: #ffffff;
+  --color-silver: #d0d0d0;
+  --color-charcoal-dark: #333333;
+
+  --sans-serif-font-family: 'Montserrat', Arial, sans-serif;
+  --serif-font-family: 'ff-meta-serif-web-pro', serif;
+
+  /* 64px */
+  --larger-font-size: 4rem;
+  /* 44px */
+  --larger-font-size: 2.75.rem;
+  /* 34px */
+  --large-font-size: 2.125rem;
+  /* 24px */
+  --slightly-large-font-size: 1.5rem;
+  /* 18px */
+  --regular-font-size: 1.125rem;
+  /* 16px */
+  --slightly-small-font-size: 1rem;
+  /* 14px */
+  --small-font-size: 0.875rem;
+  /* 11px */
+  --tiny-font-size: 0.688rem;
+
+  --regular-font-weight: 400;
+  --semibold-font-weight: 600;
+  --bold-font-weight: 800;
+
+  --paragraph-line-height: 1.5;
+}

client/src/styles/variables.css

@@ -1,21 +0,0 @@
-:root {
-  --default-border-radius: 13px;
-
-  --section-spacing: 60px;
-  --large-spacing: 30px;
-  --medium-spacing: 20px;
-  --small-spacing: 10px;
-
-  --mark-alpha: #fbf44a;
-  --mark-beta: #FF8BDE;
-  --mark-gamma: #6FDCFF;
-
-  --color-white: #ffffff;
-  --color-silver: #d0d0d0;
-  --color-charcoal-dark: #333333;
-
-  --sans-serif-font-family: 'Montserrat', Arial, sans-serif;
-  --serif-font-family: 'ff-meta-serif-web-pro', serif;
-
-  --regular-font-size: 18px;
-}