style: 💄 tweak CSS at various places

Musketeer-Developers · Aug 23, 2022 · 65e3541 · 65e3541
1 parent 9aa2a51
commit 65e3541
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 27 deletions.
diff --git a/src/helpers/common/components/EditSectionContainer.tsx b/src/helpers/common/components/EditSectionContainer.tsx
@@ -34,9 +34,11 @@ const EditSectionContainer = ({
   };
 
   return (
-    <div>
+    <div className="shadow-sm rounded-lg">
       <div
-        className="bg-resume-100 h-12 w-full rounded-t-md shadow-level-4px-0.25 relative flex items-center justify-between px-4 text-resume-800 font-bold text-lg select-none cursor-pointer z-10"
+        className={`bg-resume-100 shadow-sm h-12 w-full ${
+          expanded ? `rounded-t-lg` : `rounded-lg`
+        } relative flex items-center justify-between px-4 text-resume-800 font-bold text-lg select-none cursor-pointer z-10`}
         onClick={clickHandler}
       >
         <span>{title}</span>
@@ -51,7 +53,7 @@ const EditSectionContainer = ({
       <AnimatePresence>
         {expanded && (
           <motion.div
-            className={`bg-resume-10 relative rounded-b-md px-4 py-6 shadow-level-4px-0.25 overflow-hidden ${
+            className={`bg-resume-10 shadow-sm relative rounded-b-lg px-4 py-6 overflow-hidden ${
               !isEnabled && nonEditableStyle
             }`}
             exit={animation.exit}

diff --git a/src/helpers/common/components/MoveEditSectionContainer.tsx b/src/helpers/common/components/MoveEditSectionContainer.tsx
@@ -33,9 +33,11 @@ const MoveEditSection = ({
   onDelete: (index: number) => void;
 }) => {
   return (
-    <div>
+    <div className="shadow-sm rounded-lg">
       <div
-        className="bg-resume-100 h-12 w-full rounded-t-md shadow-level-4px-0.25 relative flex items-center justify-between pl-4 pr-5 text-resume-800 font-bold text-lg select-none cursor-pointer z-10"
+        className={`bg-resume-100 shadow-sm h-12 w-full ${
+          expanded ? `rounded-t-lg` : `rounded-lg`
+        } relative flex items-center justify-between pl-4 pr-5 text-resume-800 font-bold text-lg select-none cursor-pointer z-10`}
         onClick={clickHandler}
       >
         <span className="w-[15rem] overflow-hidden text-ellipsis whitespace-nowrap" title={title}>
@@ -81,7 +83,7 @@ const MoveEditSection = ({
       <AnimatePresence>
         {expanded && (
           <motion.div
-            className={`bg-resume-10 relative rounded-b-md px-4 py-6 shadow-level-4px-0.25 overflow-hidden`}
+            className={`bg-resume-10 relative rounded-b-lg px-4 pt-6 pb-2 overflow-hidden`}
             exit={animation.exit}
           >
             {children}

diff --git a/src/helpers/common/components/richtext/index.tsx b/src/helpers/common/components/richtext/index.tsx
@@ -49,7 +49,7 @@ export const RichtextEditor = memo(({ label, onChange, value }: IRichtext) => {
   }, [onChange]);
 
   return (
-    <div className={`${styles.editor_wrapper}`}>
+    <div className={`${styles.editor_wrapper} mb-4`}>
       <div
         style={{
           padding: '8px 16px 0px',

diff --git a/src/helpers/common/components/richtext/jodit.module.css b/src/helpers/common/components/richtext/jodit.module.css
@@ -12,8 +12,9 @@
   position: absolute;
   bottom: 0;
   width: 100%;
-  border-radius: 0px;
+  border-radius: 0px 0px 4px 4px;
   border-inline: 1px solid #dadada;
+  background-color: white;
 }
 
 .editor_wrapper :global(.jodit-workplace) {

diff --git a/src/modules/builder/nav-bar/NavBarLayout.tsx b/src/modules/builder/nav-bar/NavBarLayout.tsx
@@ -9,7 +9,7 @@ import { PrintResume } from './components/PrintResume';
 
 const NavBarLayout = () => {
   return (
-    <nav className="h-14 w-full bg-resume-800 relative flex py-2.5 pl-5 pr-4 items-center shadow-level-8dp z-10 print:hidden">
+    <nav className="h-14 w-full bg-resume-800 relative flex py-2.5 pl-5 pr-4 items-center shadow-level-8dp z-20 print:hidden">
       <Link href="/">
         <a className="flex items-center">
           <Image src={'/icons/resume-icon.png'} alt="logo" height={'36px'} width={'36px'} />

diff --git a/src/modules/home/HomeLayout.tsx b/src/modules/home/HomeLayout.tsx
@@ -21,7 +21,7 @@ const HomeLayout = () => {
 
   return (
     <div className="scroll-smooth">
-      <nav className="sticky top-0 z-10 h-14 w-full bg-resume-800 relative flex py-2.5 px-4 xl:px-60 items-center shadow-level-8dp">
+      <nav className="sticky top-0 z-20 h-14 w-full bg-resume-800 relative flex py-2.5 px-4 xl:px-60 items-center shadow-level-8dp">
         <Link href="/">
           <a className="flex items-center">
             <Image src={'/icons/resume-icon.png'} alt="logo" height={'36px'} width={'36px'} />
@@ -43,7 +43,12 @@ const HomeLayout = () => {
           </NavBarActions>
         </div>
       </nav>
-      <div style={{ background: 'linear-gradient(180deg, #E7EEFA 50%, #FFFFFF 100%)' }}>
+      <div
+        style={{
+          background: 'linear-gradient(180deg, #E7EEFA 50%, #FFFFFF 100%)',
+          fontFamily: "'Roboto Slab', serif",
+        }}
+      >
         <div className="mx-6 md:mx-40 xl:mx-60 mb-6">
           <div className="grid grid-cols-12 pt-12 md:pt-24">
             <div className="col-span-12 sm:col-span-4">
@@ -58,25 +63,12 @@ const HomeLayout = () => {
               />
             </div>
             <div className="col-span-12 sm:col-span-8">
-              <h3
-                className="text-xl md:text-2xl mb-2 text-resume-400"
-                style={{ fontFamily: "'Roboto Condensed', serif" }}
-              >
-                SIMPLEST WAY TO BUILD A
-              </h3>
-              <h1
-                className="text-5xl mb-12 text-resume-800"
-                style={{ fontFamily: "'Roboto Slab', serif" }}
-              >
-                Professional Resume
-              </h1>
+              <h3 className="text-xl md:text-2xl mb-2 text-resume-400">SIMPLEST WAY TO BUILD A</h3>
+              <h1 className="text-5xl mb-12 text-resume-800">Professional Resume</h1>
 
               <div className="flex mb-10">
                 <div className="bg-resume-800 w-1 rounded-lg"></div>
-                <p
-                  className="text-lg ml-3 text-resume-800"
-                  style={{ fontFamily: "'Kalam', serif" }}
-                >
+                <p className="text-lg ml-3 text-resume-800">
                   &ldquo;The secret to getting ahead is getting started&rdquo;
                   <br />
                   —Mark Twain