rajatava/admin/form/member/blog

src/components/Core/Button.jsx

@@ -11,9 +11,15 @@ const Button = ({
   ...rest
 }) => {
   const combinedStyle = {
-    color: variant === "primary" ? "#FF8A00" : "#fff",
-    backgroundColor: variant === "primary" ? "#2D2D2D" : "transparent",
-    borderColor: variant === "primary" ? "#2D2D2D" : "#fff",
+    color: "#fff",
+    background:
+      variant === "primary"
+        ? "linear-gradient(135deg, #FF8A00 0%, #d03e21 100%)"
+        : "transparent",
+    border:
+      variant === "primary"
+        ? "none"
+        : "1px solid rgba(255, 255, 255, 0.3)",
     opacity: disabled || isLoading ? 0.5 : 1,
     cursor: disabled || isLoading ? "not-allowed" : "pointer",
     ...style,

src/components/Core/Input.jsx

@@ -57,52 +57,63 @@ const customStyles = {
     display: "flex",
     outline: "none",
     width: "99.5%",
-    fontSize: "12px",
-    backgroundColor: "transparent",
-    borderRadius: "4px",
+    fontSize: "13px",
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    borderRadius: "8px",
     color: "#fff",
     marginBottom: "0",
-    maxHeight: "40px",
+    maxHeight: "42px",
     marginLeft: "8px",
     marginRight: "8px",
     marginTop: "4px",
     position: "relative",
-    border: "1px solid rgba(211, 211, 211, 0.5)",
+    border: "1px solid rgba(211, 211, 211, 0.25)",
     boxShadow: "none",
+    transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
     "&:hover": {
-      borderColor: "#fff !important",
+      borderColor: "rgba(255, 138, 0, 0.4)",
+      backgroundColor: "rgba(255, 255, 255, 0.05)",
     },
   }),
   menu: (provided) => ({
     ...provided,
     width: "99.5%",
     marginLeft: "8px",
+    backgroundColor: "#1e1e1e",
+    borderRadius: "10px",
+    border: "1px solid rgba(255, 138, 0, 0.12)",
+    boxShadow: "0 12px 40px rgba(0, 0, 0, 0.5)",
+    overflow: "hidden",
+    padding: "4px",
   }),
   menuPortal: (provided) => ({ ...provided, zIndex: 111 }),
   placeholder: (provided) => ({
     ...provided,
     display: "flex",
     alignItems: "center",
     marginTop: "-7px",
+    color: "rgba(255, 255, 255, 0.35)",
+    fontSize: "12px",
   }),
   option: (provided, state) => ({
     ...provided,
-    color: state.isSelected ? "#FF8A00" : "#2D2D2D",
-    backgroundColor: state.isSelected ? "#2D2D2D" : "#fff",
+    color: state.isSelected ? "#FF8A00" : "rgba(255, 255, 255, 0.85)",
+    backgroundColor: state.isSelected
+      ? "rgba(255, 138, 0, 0.1)"
+      : "transparent",
     cursor: "pointer",
-    width: "99%",
+    width: "100%",
     border: "none",
-    margin: "0 auto",
-    borderRadius: "4px",
+    borderRadius: "6px",
+    padding: "8px 12px",
+    fontSize: "13px",
+    transition: "all 0.15s ease",
     "&:hover": {
-      transition: "ease-in-out 0.3s",
-      backgroundColor: "#2D2D2D",
+      backgroundColor: "rgba(255, 138, 0, 0.08)",
       color: "#FF8A00",
-      margin: "2px auto",
     },
     "&:active": {
-      backgroundColor: "#2D2D2D",
-      color: "#FF8A00",
+      backgroundColor: "rgba(255, 138, 0, 0.15)",
     },
   }),
   indicatorSeparator: (provided) => ({
@@ -115,7 +126,7 @@ const customStyles = {
     display: "flex",
     alignItems: "center",
     marginTop: "-7px",
-    fontSize:"larger"
+    fontSize: "13px",
   }),
 };
 
@@ -523,7 +534,7 @@ const Input = (props) => {
       className={`${styles.containerInput} ${containerClassName}`}
       style={
         containerStyle || {
-          marginTop: type === "select" ? "0" : "8px",
+          marginTop: "8px",
         }
       }
     >

src/components/Core/styles/Core.module.scss

@@ -5,13 +5,41 @@
   margin-top: 20px;
   outline: none;
   border: none;
-  padding: 8px 16px;
-  font-size: 12px;
-  background-color: transparent;
-  border: 1px solid rgba(211, 211, 211, 0.5);
+  padding: 10px 22px;
+  font-size: 13px;
+  background: linear-gradient(135deg, #FF8A00 0%, #d03e21 100%);
+  color: #fff;
   cursor: pointer;
-  border-radius: 4px;
-  font-weight: 500;
+  border-radius: 8px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px rgba(255, 138, 0, 0.15);
+  position: relative;
+  overflow: hidden;
+}
+
+.main_Button::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.main_Button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(255, 138, 0, 0.3);
+}
+
+.main_Button:hover::before {
+  opacity: 1;
+}
+
+.main_Button:active {
+  transform: translateY(0px) scale(0.98);
+  box-shadow: 0 1px 4px rgba(255, 138, 0, 0.2);
 }
 
 .h1 {
@@ -58,48 +86,66 @@
   position: relative;
   width: auto;
 }
+
 .input {
   display: flex;
   outline: none;
   border: none;
-  padding: 10px;
-  font-size: 12px;
+  padding: 11px 12px;
+  font-size: 13px;
   margin: 6px;
   margin-bottom: 10px;
-  background-color: transparent;
-  border: 1px solid rgba(211, 211, 211, 0.5) !important;
-  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(211, 211, 211, 0.25) !important;
+  border-radius: 8px;
   color: #fff;
   position: relative;
   width: auto;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
+
+.input::placeholder {
+  color: rgba(255, 255, 255, 0.35);
+  font-size: 12px;
+}
+
 .input:hover {
-  border: 1px solid #fff !important;
-  transition: 0.3s ease-in-out;
+  border: 1px solid rgba(255, 138, 0, 0.4) !important;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.input:focus {
+  border: 1px solid #FF8A00 !important;
+  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
+  background-color: rgba(255, 255, 255, 0.05);
 }
 
 .inputTxtArea {
   min-height: 185px;
   width: 380px;
   resize: none;
 }
+
 .inputSelect {
   color: #fff;
   width: 380px !important;
 }
+
 .inputSelect option {
   color: black;
 }
+
 .inputDate {
   padding: 6px !important;
   width: auto !important;
   height: 40px !important;
   position: relative;
 }
+
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   margin: 0;
-}
+}