From bb0a3a411b0820e8eed4b07c970cc11f2a859b34 Mon Sep 17 00:00:00 2001
From: Ari Yeger <yegera1@newpaltz.edu>
Date: Wed, 23 Jul 2025 16:44:04 -0400
Subject: [PATCH] refactor: replace Base components with Readable components
 across multiple pages

---
 client/src/components/Modal.vue               | 14 ++++----
 .../ReadableButton.vue}                       |  0
 .../ReadableDiv.vue}                          |  0
 .../ReadableInput.vue}                        |  0
 .../ReadableSVG.vue}                          |  0
 client/src/views/ContactPage.vue              |  4 +--
 client/src/views/LoginPage.vue                | 16 +++++-----
 client/src/views/MainPage.vue                 | 32 +++++++++----------
 8 files changed, 33 insertions(+), 33 deletions(-)
 rename client/src/components/{baseComponents/BaseButton.vue => readableComponents/ReadableButton.vue} (100%)
 rename client/src/components/{baseComponents/BaseDiv.vue => readableComponents/ReadableDiv.vue} (100%)
 rename client/src/components/{baseComponents/BaseInput.vue => readableComponents/ReadableInput.vue} (100%)
 rename client/src/components/{baseComponents/BaseSVG.vue => readableComponents/ReadableSVG.vue} (100%)

diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index 6dc7728..80b99c3 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BaseDiv from "@components/baseComponents/BaseDiv.vue";
+import ReadableDiv from "@components/readableComponents/ReadableDiv.vue";
 
 const emit = defineEmits(["close"])
 
@@ -9,20 +9,20 @@ const emit = defineEmits(["close"])
     <div class="modal-fade" tabindex="-1" id="editModal" aria-labelledby="editModalLabel" @click="emit('close')">
         <div class="modal" @click.stop>
             <div class="modal-content">
-                <BaseDiv class="modal-header">
+                <ReadableDiv class="modal-header">
                     <slot name="modal-header">
                         Modal Header
                     </slot>
                     <button type="button" class="btn-close" aria-label="Close" @click="emit('close')"/>
-                </BaseDiv>
-                <BaseDiv v-if="$slots.body" class="modal-body">
+                </ReadableDiv>
+                <ReadableDiv v-if="$slots.body" class="modal-body">
                     <slot name="body"></slot>
-                </BaseDiv>
-                <BaseDiv v-if="$slots.footer" class="modal-footer">
+                </ReadableDiv>
+                <ReadableDiv v-if="$slots.footer" class="modal-footer">
                     <slot name="footer">
                         <button type="button" class="btn btn-secondary" @click="emit('close')">Close</button>
                     </slot>
-                </BaseDiv>
+                </ReadableDiv>
             </div>
         </div>
     </div>
diff --git a/client/src/components/baseComponents/BaseButton.vue b/client/src/components/readableComponents/ReadableButton.vue
similarity index 100%
rename from client/src/components/baseComponents/BaseButton.vue
rename to client/src/components/readableComponents/ReadableButton.vue
diff --git a/client/src/components/baseComponents/BaseDiv.vue b/client/src/components/readableComponents/ReadableDiv.vue
similarity index 100%
rename from client/src/components/baseComponents/BaseDiv.vue
rename to client/src/components/readableComponents/ReadableDiv.vue
diff --git a/client/src/components/baseComponents/BaseInput.vue b/client/src/components/readableComponents/ReadableInput.vue
similarity index 100%
rename from client/src/components/baseComponents/BaseInput.vue
rename to client/src/components/readableComponents/ReadableInput.vue
diff --git a/client/src/components/baseComponents/BaseSVG.vue b/client/src/components/readableComponents/ReadableSVG.vue
similarity index 100%
rename from client/src/components/baseComponents/BaseSVG.vue
rename to client/src/components/readableComponents/ReadableSVG.vue
diff --git a/client/src/views/ContactPage.vue b/client/src/views/ContactPage.vue
index e29ed50..74aad98 100644
--- a/client/src/views/ContactPage.vue
+++ b/client/src/views/ContactPage.vue
@@ -11,7 +11,7 @@ interface Contact {
 }
 
 import {api} from '@models/rest';
-import BaseButton from "@components/baseComponents/BaseButton.vue";
+import ReadableButton from "@components/readableComponents/ReadableButton.vue";
 
 async function emailAPI(action: string, body?: unknown, method?: string, headers?: HeadersInit) {
     return await api(`/email${action}`, body, method, headers);
@@ -85,7 +85,7 @@ async function submitForm() {
                             <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"/>
                             <span class="sr-only">Sending...</span>
                         </button>
-                        <BaseButton v-else type="submit" class="btn btn-submit">Send</BaseButton>
+                        <ReadableButton v-else type="submit" class="btn btn-submit">Send</ReadableButton>
                     </div>
                 </form>
             </div>
diff --git a/client/src/views/LoginPage.vue b/client/src/views/LoginPage.vue
index 2e6174b..ba9014a 100644
--- a/client/src/views/LoginPage.vue
+++ b/client/src/views/LoginPage.vue
@@ -4,9 +4,9 @@ import {useLogin} from "@models/session.ts";
 import {isMobile} from "@models/globals.ts";
 import eye from '@/assets/svg/eye.svg';
 import eyeSlash from '@/assets/svg/eye-slash.svg';
-import BaseButton from "@components/baseComponents/BaseButton.vue";
-import BaseSVG from "@components/baseComponents/BaseSVG.vue";
-import BaseInput from "@components/baseComponents/BaseInput.vue";
+import ReadableButton from "@components/readableComponents/ReadableButton.vue";
+import ReadableSvg from "@components/readableComponents/ReadableSVG.vue";
+import ReadableInput from "@components/readableComponents/ReadableInput.vue";
 
 
 const username = ref('');
@@ -29,24 +29,24 @@ const showPassword = ref(false);
                     <div class="mb-2">
                         <label class="form-label" for="password">Password</label>
                         <div class="input-group">
-                            <BaseInput class="form-control" id="password" v-model="password"
+                            <ReadableInput class="form-control" id="password" v-model="password"
                                        :type="showPassword ? 'text' : 'password'"
                                        autocomplete="current-password" required style="border-right:0;"/>
                             <button type="button" class="input-group-text border-start-0"
                                     style="cursor:pointer;"
                                     @click="showPassword = !showPassword">
-                                <BaseSVG :svg="eye" :width="20" :height="20"
+                                <ReadableSvg :svg="eye" :width="20" :height="20"
                                          view-box="0 0 28 28" v-if="!showPassword"/>
-                                <BaseSVG :svg="eyeSlash" :width="20" :height="20"
+                                <ReadableSvg :svg="eyeSlash" :width="20" :height="20"
                                          view-box="0 0 28 28" v-else/>
                             </button>
                         </div>
                     </div>
                     <div class="d-grid">
-                        <BaseButton class="btn btn-submit mt-4" type="submit"
+                        <ReadableButton class="btn btn-submit mt-4" type="submit"
                                     @click.prevent="login(username, password)">
                             Login
-                        </BaseButton>
+                        </ReadableButton>
                     </div>
                 </form>
             </div>
diff --git a/client/src/views/MainPage.vue b/client/src/views/MainPage.vue
index cb7dcc5..c88b319 100644
--- a/client/src/views/MainPage.vue
+++ b/client/src/views/MainPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import BaseDiv from "@components/baseComponents/BaseDiv.vue";
-import BaseButton from "@components/baseComponents/BaseButton.vue";
+import ReadableDiv from "@components/readableComponents/ReadableDiv.vue";
+import ReadableButton from "@components/readableComponents/ReadableButton.vue";
 </script>
 
 <template>
@@ -13,30 +13,30 @@ import BaseButton from "@components/baseComponents/BaseButton.vue";
             <div class="col">Primary:</div>
         </div>
         <div class="row justify-content-center">
-            <BaseDiv class="col-md-1 primary">Main</BaseDiv>
-            <BaseDiv class="col-md-1 primary hover">Hover</BaseDiv>
-            <BaseDiv class="col-md-1 primary active">Active</BaseDiv>
-            <BaseDiv class="col-md-1 primary disabled">Disabled</BaseDiv>
+            <ReadableDiv class="col-md-1 primary">Main</ReadableDiv>
+            <ReadableDiv class="col-md-1 primary hover">Hover</ReadableDiv>
+            <ReadableDiv class="col-md-1 primary active">Active</ReadableDiv>
+            <ReadableDiv class="col-md-1 primary disabled">Disabled</ReadableDiv>
         </div>
         <div class="row justify-content-center">
-            <BaseDiv class="col">Secondary:</BaseDiv>
+            <ReadableDiv class="col">Secondary:</ReadableDiv>
         </div>
         <div class="row justify-content-center">
-            <BaseDiv class="col-md-1 secondary">Main</BaseDiv>
-            <BaseDiv class="col-md-1 secondary hover">Hover</BaseDiv>
-            <BaseDiv class="col-md-1 secondary active">Active</BaseDiv>
-            <BaseDiv class="col-md-1 secondary disabled">Disabled</BaseDiv>
+            <ReadableDiv class="col-md-1 secondary">Main</ReadableDiv>
+            <ReadableDiv class="col-md-1 secondary hover">Hover</ReadableDiv>
+            <ReadableDiv class="col-md-1 secondary active">Active</ReadableDiv>
+            <ReadableDiv class="col-md-1 secondary disabled">Disabled</ReadableDiv>
         </div>
         <div class="row justify-content-center">
-            <BaseDiv class="col">Buttons:</BaseDiv>
+            <ReadableDiv class="col">Buttons:</ReadableDiv>
         </div>
         <div class="row justify-content-center">
             <div class="col">
                 <div class="btn-group">
-                    <BaseButton class="btn btn-primary">Primary Button</BaseButton>
-                    <BaseButton class="btn btn-secondary">Secondary Button</BaseButton>
-                    <BaseButton class="btn btn-submit">Submit Button</BaseButton>
-                    <BaseButton class="btn btn-danger">Danger Button</BaseButton>
+                    <ReadableButton class="btn btn-primary">Primary Button</ReadableButton>
+                    <ReadableButton class="btn btn-secondary">Secondary Button</ReadableButton>
+                    <ReadableButton class="btn btn-submit">Submit Button</ReadableButton>
+                    <ReadableButton class="btn btn-danger">Danger Button</ReadableButton>
                 </div>
             </div>
         </div>