countdown now appears as a card

stevenson-space · Aug 2, 2023 · c79ce39 · c79ce39
1 parent 913589d
commit c79ce39
Showing 1 changed file with 25 additions and 23 deletions.
diff --git a/src/components/cards/PwcCard.vue b/src/components/cards/PwcCard.vue
@@ -1,14 +1,20 @@
 <template>
-    <div class="card">
-        <h1>PWC Gym Countdown</h1>
+    <card class="card">
+        <h1 class="title">PWC Hours</h1>
         <div class="countdown">
             <p v-if="isOpen">Time remaining until closure: {{ countdownTime }}</p>
             <p v-else>Time remaining until next opening: {{ countdownTime }}</p>
         </div>
-    </div>
+    </card>
 </template>
 
-<script>export default {
+<script>
+    import Card from '@/components/Card.vue';
+
+
+export default {
+
+        components: { Card },components: { Card },
         data() {
             return {
                 openingTimes: [
@@ -129,28 +135,24 @@
 <style lang="sass" scoped>
 @import 'src/styles/style.sass'
 
+
 .card
-  padding: 10px
-  background-color: #00563F
-  color: #FFFFFF
-  display: flex
-  flex-direction: column
-  justify-content: center
-  align-items: center
-  min-height: 150px
-  width: 200px
+  padding: 0 8px
+  padding-bottom: 5px
+
 
-  .title
-    font-size: 18px
-    margin: 15px 0
-    text-align: center
+.title
+  font-size: 30px
+  
+  margin: 15px 0
+  text-align: center
 
 
-  .countdown
-    font-size: 16px
-    font-weight: bold
-    margin-top: 10px
+.countdown
+  font-size: 16px
+  
+  margin-top: 10px
 
-  .countdown p
-    margin: 5px 0
+.countdown p
+  margin: 5px 0
 </style>