Merge pull request #357 from fluidchunky/main

fixed card icons

Author: fluidchunky

elements/avatars.tsx

@@ -8,12 +8,12 @@ export const SimpleAvatar = (props: any) => {
   return (
     <div className="flex flex-col items-center">
       <div
-        className="w-11 h-11 bg-cyan z-10"
+        className="w-12 h-12 bg-primary/30 z-10"
         style={{
           clipPath: 'polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)',
         }}/>
       <div
-        className="w-10 h-10 z-20 bg-dark-green-secondary absolute mt-0.5"
+        className="w-10 h-10 z-20 bg-primary absolute m-1"
         style={{
           clipPath: 'polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)',
         }}>
@@ -22,14 +22,13 @@ export const SimpleAvatar = (props: any) => {
           alt={props.alt ?? ''}
           width={10}
           height={10}
-          className="object-cover w-full h-full"
+          className="object-cover w-10 h-10 border-4 border-white"
         />
       </div>
     </div>
   );
 }
 
-
 export const Chunky = (props: any) => {
   return (
     <div className="flex flex-col items-center">
@@ -39,7 +38,7 @@ export const Chunky = (props: any) => {
           clipPath: 'polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)',
         }}/>
       <div
-        className="w-10 h-10 z-20 bg-dark-green-secondary absolute mt-0.5"
+        className="w-10 h-10 z-20 bg-dark-green-secondary mt-0.5"
         style={{
           clipPath: 'polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)',
         }}>
@@ -82,8 +81,10 @@ export const ComplexAvatar = ({
   communityName,
 }: any) => {
   return (
-    <div className="flex">
+    <div className="flex flex-row">
+      <div className="flex">
       <SimpleAvatar src={profileImage || placeholder}/>
+      </div>
       <div className={`${readexPro.className} block items-center font-normal justify-center ml-3 max-w-1/2`}>
         <Link href={`/${username}`} className={`${readexPro.className} hover:underline text-white`}>
           {username?.length > 20 ? username.substring(0, 20) : username}

screens/home/MainHomeScreen.tsx

@@ -11,7 +11,7 @@ import { readex_pro, DynamicIcon } from '~/elements';
 
 export const Container = ({ children }: any) => {
     return (
-      <div className="bg-dark-indigo w-full flex justify-center m-auto -mt-24 lg:mt-4 w-full">
+      <div className="bg-dark-indigo w-full flex justify-center m-auto lg:mt-20 -mt-24 lg:mt-4 w-full">
         <Image src={spot} alt="spot" className="z-0 block top-0 ml-auto absolute h-full" />
         <Image src={wire1} alt="wire1" className="hidden sm:block z-0 top-[40%] absolute" />
         <Image src={wire2} alt="wire2" className="hidden sm:block z-0 top-[40%] absolute" />
@@ -26,7 +26,7 @@ export const Container = ({ children }: any) => {
 }
 export const MainHomeScreen = () => {
     return <Container>
-        <div className="w-full flex flex-col justify-start items-center mt-10 h-screen bg-black/0 z-50">
+        <div className="w-full flex flex-col justify-start items-center mt-64 lg:mt-10 pb-80 bg-black/0 z-50">
             <DynamicIcon name={'SquaresPlusIcon'} width={48} height={48} className='text-primary mr-3'/>
             <div className={`${readex_pro.className} text-left flex flex-row mb-8 lg:mt-0`}>
                     <span className='font-normal text-transparent bg-clip-text bg-gradient-to-r from-cyan to-light-green text-2xl'>