starting to change out logos

Author: lu0713

app/components/Splash.tsx

@@ -13,8 +13,7 @@ const Splash: React.FC<SplashProps> = ({ setFirstVisit }) => {
 
   return (
     <div id="splash">
-      <img src={'../assets/icon.png'} alt="Chronos Logo" />
-      <span>CHRONOS</span>
+      <img src={'../assets/logo.svg'} alt="Chronos" />
     </div>
   );
 };

app/containers/SidebarContainer.tsx

@@ -10,8 +10,7 @@ import '../stylesheets/SidebarContainer.css';
 const SidebarContainer: React.FC = (): JSX.Element => (
   <div className="sidebar-container" id="mySidebar">
     <div className="sidebar">
-      <img alt="Chronos Logo" id="serviceDashLogo" src={'../assets/icon.png'} />
-      <img alt="Chronos Logo Mini" id="miniLogo" src={'../assets/icon.png'} />
+      <img alt="Chronos Logo Mini" id="miniLogo" src={'../assets/C.svg'} />
       <Link className="sidebar-link" to="/" id="home">
         <HomeSharpIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
         &emsp;Home

app/stylesheets/Splash.css

@@ -11,40 +11,46 @@
   width: 100%;
   height: 100%;
   opacity: 1;
-  animation-name: fadeInOpacity;
-  animation-iteration-count: 1;
-  animation-timing-function: ease-out;
-  animation-duration: 3s;
+  animation: fadeOut ease 6s;
+  -webkit-animation: fadeOut ease 6s;
+  -moz-animation: fadeOut ease 6s;
+  -o-animation: fadeOut ease 6s;
+  -ms-animation: fadeOut ease 6s;
   background-color: #161b2d;
 }
 
-@keyframes fadeInOpacity {
-  0% {
-    opacity: 1;
-  }
-  66% {
-    opacity: 0.66;
-  }
-  100% {
-    opacity: 0;
-  }
+@keyframes fadeOut {
+0% {opacity:1;}
+70% {opacity:0.5;}
+95% {opacity:0.25;}
+100% {opacity:0;}
+}
+
+@-moz-keyframes fadeOut {
+0% {opacity:1;}
+100% {opacity:0;}
+}
+
+@-webkit-keyframes fadeOut {
+0% {opacity:1;}
+100% {opacity:0;}
+}
+
+@-o-keyframes fadeOut {
+0% {opacity:1;}
+100% {opacity:0;}
+}
+
+@-ms-keyframes fadeOut {
+0% {opacity:1;}
+100% {opacity:0;}
 }
 
 #splash img {
-  height: 300px;
+  width: 60%;
   margin-bottom: 0px;
   margin-top: -100px;
-  animation: twirl 20s infinite linear;
-  opacity: 0.8;
+  opacity: 0.9;
 }
 
-#splash span {
-  color: #5490c8;
-  font-size: 9vw;
-  letter-spacing: 100px;
-  margin-right: -100px;
-  /* font-family: 'Inter', sans-serif; */
-  font-family: 'Lexend Peta', sans-serif;
-  /* font-weight: lighter; */
-}
 

package.json

@@ -18,7 +18,8 @@
     "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
     "create-installer-mac": "electron-installer-dmg ./release-builds/chronos-darwin-x64/chronos.app/ Chronos",
     "delete": "rm -r dist & rm -r build",
-    "reinstall": "rm -r node_modules && npm install"
+    "reinstall": "rm -r node_modules && npm install",
+    "prepare": "tsc -v && tsc -p . && npm run build"
   },
   "babel": {
     "presets": [