little tweaks

webapp/src/App.vue

@@ -38,8 +38,9 @@ const items = [
   { title: 'Home', icon: 'mdi-home', to: '/' },
   { title: 'Map', icon: 'mdi-map', href: 'https://maps.deflock.org' },
   { title: 'Learn', icon: 'mdi-school', to: '/what-is-an-alpr' },
-  { title: 'Store', icon: 'mdi-shopping', to: '/store' },
+  { title: 'Store', icon: 'mdi-shopping', to: '/store', isNew: true },
   { title: 'Donate', icon: 'mdi-cash-multiple', to: '/donate' },
+
 ]
 
 const resourceItems = [
@@ -107,7 +108,17 @@ watch(() => theme.global.name.value, (newTheme) => {
               :prepend-icon="item.icon"
             >
               {{ item.title }}
+              <v-chip
+                v-if="item.isNew"
+                size="x-small"
+                color="rgb(18, 151, 195)"
+                class="ml-2 font-weight-bold"
+                label
+              >
+                New!
+              </v-chip>
             </v-btn>
+
           </div>
 
           <v-spacer></v-spacer>
@@ -213,9 +224,19 @@ watch(() => theme.global.name.value, (newTheme) => {
           >
             <v-icon start>{{ item.icon }}</v-icon>
             {{ item.title }}
+            <v-chip
+              v-if="item.isNew"
+              size="x-small"
+              color="rgb(18, 151, 195)"
+              class="ml-2 font-weight-bold"
+              label
+            >
+              New!
+            </v-chip>
           </v-list-item>
         </v-list>
 
+
         <v-divider class="my-2" aria-hidden="true" role="presentation" />
 
         <v-list-subheader class="px-4">Resources</v-list-subheader>

webapp/src/components/layout/Footer.vue

@@ -8,7 +8,7 @@
         </v-col>
         
         <!-- Info -->
-        <v-col cols="6" sm="3">
+        <v-col cols="6" sm="4">
           <v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-info-heading">Info</v-list-subheader>
           <v-list density="compact" aria-labelledby="footer-info-heading" role="list">
             <v-list-item role="listitem"
@@ -28,7 +28,7 @@
         </v-col>
 
         <!-- Contact Us -->
-        <v-col cols="6" sm="3">
+        <v-col cols="6" sm="4">
           <v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-contact-heading">Contact Us</v-list-subheader>
           <v-list density="compact" aria-labelledby="footer-contact-heading" role="list">
             <v-list-item role="listitem"
@@ -48,7 +48,7 @@
         </v-col>
 
         <!-- Get Involved -->
-        <v-col cols="6" sm="3">
+        <v-col cols="12" sm="4">
           <v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-involved-heading">Get Involved</v-list-subheader>
           <v-list density="compact" aria-labelledby="footer-involved-heading" role="list">
             <v-list-item
@@ -69,12 +69,6 @@
           </v-list>
         </v-col>
 
-        <!-- Official Socials -->
-        <v-col cols="6" sm="3">
-          <v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-socials-heading">Official Socials</v-list-subheader>
-          <OfficialSocials />
-        </v-col>
-
         <!-- Copyright -->
         <v-col
           class="text-center d-flex align-center justify-center text-grey-darken-1"
@@ -94,7 +88,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useTheme } from 'vuetify';
-import OfficialSocials from './OfficialSocials.vue';
 const theme = useTheme();
 const isDark = computed(() => theme.name.value === 'dark');
 const currentYear = new Date().getFullYear();

webapp/src/components/layout/OfficialSocials.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="official-socials">
+  <v-sheet class="official-socials" color="surface">
+
     <p class="official-socials-disclaimer text-caption px-4 pt-2 pb-2 mb-0">
       These are DeFlock National's official social media links. Partner groups are
       listed at <router-link to="/groups">deflock.org/groups</router-link>. Other
@@ -31,9 +32,10 @@
         <v-list-item-title>{{ social.title }}</v-list-item-title>
       </v-list-item>
     </v-list>
-  </div>
+  </v-sheet>
 </template>
 
+
 <script setup lang="ts">
 const socials = [
   {