Merge branch 'development' into feature/issue-104-edit-index

Author: NEKOYASAN

src/assets/svgs/prj_logo.svg

@@ -0,0 +1,60 @@
+<template>
+  <button :class="`ActionButton ActionButton-${theme}`" @click="onClick">
+    <span>{{ text }}</span>
+  </button>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+type Theme = 'primary' | 'secondary' | 'border' | 'transparent'
+
+@Component
+export default class ActionButton extends Vue {
+  @Prop({ default: 'primary' })
+  theme!: Theme
+
+  @Prop({ default: '' })
+  text!: string | undefined
+
+  onClick(): void {
+    this.$router.push('/')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ActionButton {
+  width: 100%;
+  border-radius: 3em;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 12px 16px;
+
+  &-primary {
+    background-color: $color-yellow;
+    color: $color-gray;
+  }
+
+  &-secondary {
+    background-color: $color-white;
+    color: $color-gray;
+  }
+
+  &-border {
+    background-color: $color-white;
+    border: 1px solid $color-base-color-01;
+    color: $color-base-color-01;
+    box-shadow: none;
+  }
+
+  &-transparent {
+    border: 1px solid $color-white;
+    color: $color-white;
+    box-shadow: none;
+  }
+}
+</style>

src/components/ActionButton.vue

@@ -276,7 +276,6 @@ export default class CalendarBar extends Vue {
   background: rgba(0, 0, 0, 0);
   height: 68px;
   min-width: 12px;
-  font-family: 'Noto Sans JP', sans-serif;
 
   .title {
     color: $color-base-color-01;
@@ -308,12 +307,12 @@ export default class CalendarBar extends Vue {
   flex-direction: column;
   background: $color-white;
   height: 68px;
-  min-width: 16px;
-  border-radius: 30px !important;
+  min-width: 1rem;
+  max-width: 3rem;
+  border-radius: 3em !important;
   align-items: center;
   justify-content: center;
   color: $color-gray;
-  font-family: 'Noto Sans JP', sans-serif;
   margin: 0 3px;
 }
 

src/components/CalendarBar.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-card class="ContentCard">
-    <v-card-actions>
+  <v-card class="ContentCard elevation-4">
+    <v-card-actions class="ContentCard-Actions">
       <subject-tag
         v-for="(item, idx) in subjects"
         :key="idx"
@@ -10,11 +10,20 @@
         :icon-color="item.iconColor || 'white'"
         :background-color="item.backgroundColor || '#A5D8FF'"
       />
+      <subject-tag
+        class="ContentCard-SubjectTag"
+        :name="'動画'"
+        :icon="'mdi-video'"
+        :icon-color="'#424242'"
+        :background-color="'#E0E0E0'"
+      />
     </v-card-actions>
     <v-card-title>
       <h2 class="ContentCard-Title">{{ title }}</h2>
     </v-card-title>
-    <v-card-text class="ContentCard-Description">{{ description }}</v-card-text>
+    <v-card-text>
+      <p class="ContentCard-Description">{{ description }}</p>
+    </v-card-text>
   </v-card>
 </template>
 
@@ -43,27 +52,23 @@ export default Vue.extend({
 
 <style scoped lang="scss">
 .ContentCard {
-  color: 'black';
+  color: $color-gray;
   border-radius: 14px !important;
+  .ContentCard-Actions {
+    padding: 16px 16px 0;
+  }
   .ContentCard-SubjectTag {
     margin-right: 4px;
   }
   .ContentCard-Title {
-    font-family: 'Noto Sans', sans-serif;
-    font-style: normal;
     font-weight: bold;
     font-size: 14px;
-    line-height: 19px;
-    color: #424242;
+    line-height: 1.75;
   }
   .ContentCard-Description {
-    white-space: pre-wrap;
-    font-family: 'Noto Sans', sans-serif;
-    font-style: normal;
-    font-weight: normal;
     font-size: 12px;
-    line-height: 16px;
-    color: #424242;
+    color: $color-gray;
+    margin: 0;
   }
 }
 </style>