Fixed visual error where announcemnet at top wouldn't show in dark mode

index.html

@@ -46,8 +46,10 @@
     <script src="https://m.servedby-buysellads.com/monetization.custom.js" type="text/javascript"></script>
 
     <!-- Adobe Coral -->
-    <link async type="text/css" rel="stylesheet" href="/coral.min.css">
-    <script async src="/coral.min.js" data-coral-icons-external="js"></script> 
+    <link async type="text/css" rel="stylesheet" href="https://unpkg.com/@adobe/[email protected]/dist/css/coral.min.css">
+    <!-- <link async type="text/css" rel="stylesheet" href="/coral.min.css"> -->
+    <script async src="https://unpkg.com/@adobe/[email protected]/dist/js/coral.min.js" data-coral-icons-external="js"></script> 
+    <!-- <script async src="/coral.min.js" data-coral-icons-external="js"></script>  -->
 
     <!-- heatmap -->
     <script async rel="preconnect">

src/components/Announcement.vue

@@ -29,7 +29,7 @@
             </div>
 
             <div class="mb-2 f-w-400">
-              <p class="coral-Body--M" v-html="marked(getHomeDialog.announcement)"></p>
+              <p v-html="marked(getHomeDialog.announcement)"></p>
             </div>
           </div>
 

src/components/Home.vue

@@ -88,7 +88,7 @@
 
                 <!-- Cross icon -->
                 <transition name="fade">
-                  <div v-if="!searchString" class="searchBar-right">
+                  <div v-if="!searchString" class="searchBar-right mobile-hidden">
                     <div class="search-by-algolia-wrapper">
                       <p class="coral-Body--XS">
                         Search powered by
@@ -102,7 +102,6 @@
 
                 <transition name="fade">
                   <div v-if="searchString" class="searchBar-right">
-
                     <div class="searchBar-right-wrapper">
                       <svg @click="clearSearch" class="icon p-t-24 p-b-24 p-r-8 p-l-8" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 12 12" width="12">
                         <title>CrossLarge</title>
@@ -115,7 +114,6 @@
                         </button>
                       </div>
                     </div>
-
                   </div>
                 </transition>
 
@@ -142,6 +140,16 @@
         </div>
 
          <div v-if="isMobile" class="desktop-hidden categories-container">
+          <div class="search-by-algolia-container">
+            <div class="search-by-algolia-wrapper">
+              <p class="coral-Body--XS">
+                Search powered by
+              </p>
+              <a href="https://www.algolia.com/" target="_blank">
+                <img class="algolia-logo" :src="alogliaLogo" alt="">
+              </a>
+            </div>
+          </div>
           <div id="categoriesWrapper-mobile" class="categories-wrapper">
             <coral-buttongroup selectionmode="single">
                 <button
@@ -356,52 +364,35 @@
 
         <!-- Icon grid-->
         <div>
-          <div
-          v-if="
-            searchString.length == 0
-            && search.length == 0
-            && getSelectedCategory.name != 'Saved'
-          "
-            class="icon-list-area loading p-b-32"
-          >
-            <UserIconCardLoading
-              v-for="num in 30"
-              :key="num+Math.floor(Math.random() * 10000000 + 1)"
-            />
-          </div>
-
           <div 
-            v-else
             id="iconList" 
             class="p-b-32 icon-list-area"
           >
-              <!-- <CarbonAd
-                :template="2"
-                adId="homePage"
-              /> -->
-
-               <NativeAd
-                :adId="'homePage'"
-                :template="2"
-                class="grid-ad"
-              />
-
-
-              <UserIconCard
-                v-for="icon in search"
-                :key="icon.id+icon.appName+getSelectedCategory.name"
-                :icon="icon"
-                :isAdmin="isAdmin"
-                :isMacOs="isMacOs"
-              />
+
+            <NativeAd
+              :adId="'homePage'"
+              :template="2"
+              class="grid-ad"
+            />
 
+              <!-- v-for="icon in search" -->
+            <UserIconCard
+              v-for="icon in iconInSearch(25)"
+              :isLoading="
+                searchString.length == 0
+                && search.length == 0
+                && getSelectedCategory.name != 'Saved'
+              "
+              :key="icon.id != undefined ? icon.id+icon.appName+getSelectedCategory.name : icon+Math.floor(Math.random() * 10000000 + 1)"
+              :icon="icon"
+              :isAdmin="isAdmin"
+              :isMacOs="isMacOs"
+            />
           </div>
-        </div>
 
 
+        </div>
       </div>
-
-
     </section>
 
   </div>
@@ -706,6 +697,16 @@ export default {
       'fetchHomeDialog'
     ]),
 
+    iconInSearch(num){
+      let search = this.search
+
+      if (search.length > 0) {
+        return search
+      } else{
+        return num
+      }
+    },
+
     marked(content){
       try {
         return Marked(content);

src/components/UserIconCard.vue

@@ -1,89 +1,99 @@
 <template>
-    <div
-        v-if="!isHidden.isHidden"
-        :label="icon.appName.replaceAll('_', ' ') + 'Icon'"
-        class="card-wrapper card-hover coral-card m-0"
-    >
-
-        <div class="m-auto width-100">
-
-            <div
-                :id="'saveIcon_'+icon.id"
-                @click="saveIcon()"
-                :class="{
-                    'opacity-0': !isSaved,
-                    'icon-heart': !isSaved,
-                    'icon-heart-filled': isSaved,
-                    'save-icon': true,
-                }"
-            > </div>
-
-            <!-- Icon image -->
-            <div class="card-img-wrapper" style="max-width: 120px;">
+    <div>
+        <div
+            v-if="!isHidden.isHidden && !isLoading"
+            :label="icon.appName.replaceAll('_', ' ') + 'Icon'"
+            class="card-wrapper card-hover coral-card m-0"
+        >
+
+            <div class="m-auto width-100">
 
-                <!-- macOS icon download -->
-                <a
-                    v-if="true"
-                    rel="noopener"
-                    :href="iconDownloadUrl"
-                    @click="addClickCount(icon)"
-                    target="_blank"
+                <div
+                    :id="'saveIcon_'+icon.id"
+                    @click="saveIcon()"
+                    :class="{
+                        'opacity-0': !isSaved,
+                        'icon-heart': !isSaved,
+                        'icon-heart-filled': isSaved,
+                        'save-icon': true,
+                    }"
                 >
-                    <img
-                        :alt="icon.appName + ' icon'"
-                        v-lazy="{
-                            src: lazyOptions.src,
-                            loading: lazyOptions.loading,
-                            error: lazyOptions.loading,
-                            lifecycle: lazyOptions.lifecycle
-                        }" 
-                    />
-                </a>
+                </div>
 
-            </div>
+                <!-- Icon image -->
+                <div class="card-img-wrapper" style="max-width: 120px;">
+
+                    <!-- macOS icon download -->
+                    <a
+                        v-if="true"
+                        rel="noopener"
+                        :href="iconDownloadUrl"
+                        @click="addClickCount(icon)"
+                        target="_blank"
+                    >
+                        <img
+                            :alt="icon.appName + ' icon'"
+                            v-lazy="{
+                                src: lazyOptions.src,
+                                loading: lazyOptions.loading,
+                                error: lazyOptions.loading,
+                                lifecycle: lazyOptions.lifecycle
+                            }" 
+                        />
+                    </a>
 
-            <!-- Icon meta -->
-            <div label="Icon info" class="card-text-wrapper p-l-16 p-r-16">
+                </div>
+
+                <!-- Icon meta -->
+                <div label="Icon info" class="card-text-wrapper p-l-16 p-r-16">
+
+                    <!-- App name -->
+                    <h3 class="coral-font-color m-0">
+                        {{icon.appName.replaceAll("_", " ")}}
+                    </h3>
+
+                    <!-- Credit -->
+                    <p class="coral-Body--XS opacity-70 m-b-4 p-t-4 ellipses-text-2">
+                        <span class="coral-Link">
+                            <router-link
+                                :to="'/u/'+icon.usersName"
+                            >
+                            {{icon.usersName}}
+                            </router-link>
+                        </span>
+                        on
+                        <span class="coral-Body--XS">
+                            {{ getDate(icon.timeStamp) }}
+                        </span>
+                    </p>
+
+                    <div v-if="isOwner" class="p-t-8 p-b-4">
+                        <button @click="showDialog('editIconDialog')" is="coral-button" variant="outline">Edit</button>
+                    </div>
 
-                <!-- App name -->
-                <h3 class="coral-font-color m-0">
-                    {{icon.appName.replaceAll("_", " ")}}
-                </h3>
-
-                <!-- Credit -->
-                <p class="coral-Body--XS opacity-70 m-b-4 p-t-4 ellipses-text-2">
-                    <span class="coral-Link">
-                        <router-link
-                            :to="'/u/'+icon.usersName"
-                        >
-                        {{icon.usersName}}
-                        </router-link>
-                    </span>
-                    on
-                    <span class="coral-Body--XS">
-                        {{ getDate(icon.timeStamp) }}
-                    </span>
-                </p>
-
-                <div v-if="isOwner" class="p-t-8 p-b-4">
-                    <button @click="showDialog('editIconDialog')" is="coral-button" variant="outline">Edit</button>
                 </div>
 
             </div>
+
+            <!-- Download Counter -->
+            <div label="Download Counter" class="download-counter-wrapper opacity-70">
+                <p v-if="icon.downloads > 1" class="coral-Body--XS m-0 d-inline">
+                    {{icon.downloads}}
+                </p>
+
+                <p v-else class="coral-Body--XS m-0 d-inline">
+                    0
+                </p>
 
+                <img height="10px" :src="coralIcons.download" alt="Download counter">
+            </div>
         </div>
 
-        <!-- Download Counter -->
-        <div label="Download Counter" class="download-counter-wrapper opacity-70">
-            <p v-if="icon.downloads > 1" class="coral-Body--XS m-0 d-inline">
-                {{icon.downloads}}
-            </p>
-
-            <p v-else class="coral-Body--XS m-0 d-inline">
-                0
-            </p>
-
-            <img height="10px" :src="coralIcons.download" alt="Download counter">
+        <div
+            v-else
+            class="loading"
+        >
+             <UserIconCardLoading/>
         </div>
     </div>  
 </template>
@@ -103,6 +113,8 @@ import placeholderCoralIcon from "../assets/placeholder-icon.png"
 import heartIcon from "../assets/icons/Category_Icons/Heart.svg"
 import deleteIcon from "../assets/icons/delete.svg"
 
+import UserIconCardLoading from './UserIconCardLoading.vue';
+
 export default {
     name: "UserIconCard",
     
@@ -111,9 +123,11 @@ export default {
         isAdmin: false,
         isOwner: false,
         isMacOs: Boolean,
+        isLoading: Boolean,
     },
 
     components: {
+        UserIconCardLoading,
     },
 
     data(){