From db24043f87c34d441534cc1619879def3c0b5d28 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Tue, 26 Jul 2022 08:38:44 +0200
Subject: [PATCH] feat: add components to index page (WIP)

---
 client/src/assets/css/colors.scss  | 19 +++++++++
 client/src/components/Button.vue   | 63 +++++++++++++++++++++++++++++
 client/src/components/LoginBox.vue | 15 +++++++
 client/src/components/TitleBox.vue | 64 ++++++++++++++++++++++++++++++
 client/src/pages/index.vue         |  7 +++-
 5 files changed, 166 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/Button.vue
 create mode 100644 client/src/components/LoginBox.vue
 create mode 100644 client/src/components/TitleBox.vue

diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index fcfce41..48164f2 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -10,3 +10,22 @@ $text-error-color: #ff8000;
 
 $background-overlay-color: rgba(40, 40, 56, 90%);
 
+
+// Box
+$box-primary-background-color: $background-primary-color;
+$box-primary-text-color: $text-primary-color;
+$box-primary-border: 1px solid #e0e0e0;
+
+
+// Button
+$button-background-color: #00a0e0;
+$button-text-color: #304048;
+$button-border: 4px solid #007098;
+
+$button-hover-background-color: $button-background-color;
+$button-hover-text-color: #ffffff;
+$button-hover-border: $button-border;
+
+$button-disabled-background-color: #006080;
+$button-disabled-text-color: #102028;
+$button-disabled-border: 4px solid #004060;
diff --git a/client/src/components/Button.vue b/client/src/components/Button.vue
new file mode 100644
index 0000000..198a2e3
--- /dev/null
+++ b/client/src/components/Button.vue
@@ -0,0 +1,63 @@
+<template>
+  <button class="button__button" :class="{ disabled, border }">
+    <slot />
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.button {
+  &__button {
+    display: inline-block;
+    margin: auto;
+    padding: 4px 24px;
+    background-color: inherit;
+    color: $text-secondary-color;
+    text-align: center;
+    font-family: $secondary-font;
+    font-weight: bold;
+    font-size: 24px;
+    border: none;
+    cursor: pointer;
+
+    &:hover {
+      color: $text-secondary-hover-color;
+    }
+
+    &.border {
+      background-color: $button-background-color;
+      color: $button-text-color;
+      border: $button-border;
+      border-radius: 8px;
+
+      &:hover {
+        border: $button-hover-border;
+        background-color: $button-hover-background-color;
+        color: $button-hover-text-color;
+      }
+    }
+
+    &.disabled,
+    &:hover.disabled {
+      cursor: default;
+      background-color: $button-disabled-background-color;
+      border: $button-disabled-border;
+      color: $button-disabled-text-color;
+    }
+  }
+}
+</style>
diff --git a/client/src/components/LoginBox.vue b/client/src/components/LoginBox.vue
new file mode 100644
index 0000000..6ed70b7
--- /dev/null
+++ b/client/src/components/LoginBox.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="login-box__container">
+    <Button>123456</Button>
+    <Button>646162</Button>
+  </div>
+</template>
+
+<style lang="scss">
+.login-box {
+  &__container {
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/client/src/components/TitleBox.vue b/client/src/components/TitleBox.vue
new file mode 100644
index 0000000..3999a9b
--- /dev/null
+++ b/client/src/components/TitleBox.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="titlebox__container">
+    <div class="titlebox__titleborderbox2" />
+    <div class="titlebox__titleborderbox3" />
+    <div class="titlebox__titleborderbox1">
+      <h1 class="titlebox__title">
+        Know Your Teammates!
+      </h1>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.titlebox {
+  &__container {
+    position: relative;
+    padding: 80px 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__titleborderbox1,
+  &__titleborderbox2,
+  &__titleborderbox3 {
+    border: $box-primary-border;
+    border-radius: 16px;
+    background-color: $box-primary-background-color;
+  }
+
+  &__titleborderbox1 {
+    display: flex;
+    width: 600px;
+    height: 200px;
+    justify-content: center;
+    align-items: center;
+    z-index: 3;
+  }
+
+  &__titleborderbox2 {
+    position: absolute;
+    top: 120px;
+    width: 720px;
+    height: 120px;
+    z-index: 2;
+  }
+
+  &__titleborderbox3 {
+    position: absolute;
+    top: 160px;
+    width: 760px;
+    height: 40px;
+    z-index: 1;
+  }
+
+  &__title {
+    font-size: 64px;
+    font-family: $primary-font;
+    color: $box-primary-text-color;
+    text-align: center;
+  }
+}
+</style>
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 41b9c41..536f401 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -1,14 +1,17 @@
 <template>
   <div>
-    yay
+    <TitleBox />
+    <LoginBox />
   </div>
 </template>
 
 <style lang="scss">
-@import '~/assets/css/colors';
+@import '~/assets/css/components';
 
 body {
   background-color: $background-primary-color;
   color: $text-primary-color;
+  
+  margin: 0;
 }
 </style>
\ No newline at end of file