Merge pull request #108 from terminusdb/cleanup

cleanup css

Author: Francesca-Bit

packages/tdb-dashboard/src/App.css

@@ -1195,31 +1195,3 @@ pre.CodeMirror-line  > span > span.cm-string {
   width: 100px;
   height: 100px;
 }
-
-.free_button_text_color {
-  color: #664d03 !important;
-}
-
-.free {
-  border: 1px solid rgb(254, 216, 147);
-  color: rgb(254, 216, 147);
-}
-
-.professional { 
-  border: 1px solid rgb(232, 124, 214);
-  color: rgb(232, 124, 214);
-}
-
-.scale {
-  border: 1px solid rgb(134, 89, 250);
-  color: rgb(134, 89, 250);
-}
-
-.enterprise {
-  border: 1px solid rgb(52, 80, 220);
-  color: rgb(52, 80, 220);
-}
-
-.verify__email {
-  background : linear-gradient(122deg,#fed893 0,#e87cd6 48%,#4058d0 100%);
-}

packages/tdb-dashboard/src/Colors.css

@@ -4,10 +4,12 @@
  :root {
     --color-pink: #de7dd8;
     --text-contrast-pink: #002856;
+    --color-indigo: rgb(52, 80, 220);
     --color-purple: #855afc;
     --color-purple-hover: #8f75d8;
     --text-contrast-purple: #fff;
     --color-yellow: #f9d891;
+    --text-yellow: #664d03 ;
     --color-contrast-yellow: #002856;
     --color-border-yellow: #d7a12f;
 
@@ -23,6 +25,51 @@
     --badge-border-color: var(--color-border-yellow);
 }
 
+/** subscription css */
+.free_button_text_color {
+    color: var(--text-yellow) !important;
+}
+  
+.free {
+    border: 1px solid var(--color-yellow);
+    color: var(--color-yellow);
+}
+
+.badge-free { 
+    background-color: var(--color-yellow);
+}
+  
+.professional { 
+    border: 1px solid var(--color-pink);
+    color: var(--color-pink);
+}
+
+.badge-professional { 
+    background-color: var(--color-pink);
+}
+  
+.scale {
+    border: 1px solid var(--color-purple);
+    color: var(--color-purple);
+}
+
+.badge-scale { 
+    background-color: var(--color-purple);
+}
+  
+.enterprise {
+    border: 1px solid var(--color-indigo);
+    color: var(--color-indigo)
+}
+
+.badge-enterprise { 
+    background-color: var(--color-indigo);
+}
+  
+.verify__email {
+    background : linear-gradient(122deg,var(--color-yellow) 0,var(--color-pink) 48%, var(--color-indigo) 100%);
+}
+
 .text-success,
 h3.text-success,
 h4.text-success,

packages/tdb-dashboard/src/pages/PlansPage.js

@@ -80,14 +80,19 @@ export const PlansPage = (props) => {
 		return <Card className="mr-4">
 			<Card.Body>
 				<Stack direction="horizontal" gap={3}>
-					<h6 className="text-light fw-lighter">Current Subscription</h6>
-					<Badge className={`ms-auto ${payment[0].className}`}>{payment[0].title}</Badge>
-					<div className={`${payment[0].className} border border-0`}>
+					<h6 className="text-light fw-bold">Current Subscription</h6>
+					<Badge bg="" className={`ms-auto`} style={{backgroundColor: payment[0].color , color: payment[0].textColor}}>
+						{payment[0].title.toUpperCase()}
+					</Badge>
+					{(tier === PROFESSIONAL_PLAN || tier === SCALE_PLAN) && <div className={`${payment[0].className} border border-0 fw-bold`}>
+						<MdEuroSymbol className="mb-1"/>
 						{payment[0].price}
-					</div>
+					</div>}
+					{tier === COMMUNITY_PLAN && <div className={`${payment[0].className} ${payment[0].textColor} border border-0`}>
+						{payment[0].price}
+					</div>}
 				</Stack>
 			</Card.Body>
-			
 		</Card>
 	}
 

packages/tdb-dashboard/src/payment/labels.js

@@ -46,6 +46,7 @@ export const PLANS_DESCRIPTION = [
             '100,000 API calls per month'
         ],
         color:"#fed893",
+        textColor: "#664d03",
         buttonLabel:'Get Started',
         buttonTextColor: "free_button_text_color",
         showButton:false,
@@ -70,6 +71,7 @@ export const PLANS_DESCRIPTION = [
             '1 million API calls per month'
         ],
         color:"#e87cd6",
+        textColor: "text-white",
         buttonTextColor: "text-white",
         buttonLabel:"Upgrade to Professional",
         icon: <RiUserStarLine  className="subscription_icons professional"/>,
@@ -93,6 +95,7 @@ export const PLANS_DESCRIPTION = [
             '10 million API calls per month'
         ],
         color:"#8659fa",
+        textColor: "text-white",
         buttonTextColor: "text-white",
         buttonLabel:"Upgrade to Scale",
         icon: <RiCommunityLine className="subscription_icons scale"/>,
@@ -114,6 +117,7 @@ export const PLANS_DESCRIPTION = [
             'placeholder_label'
         ],
         color:"#3450dc",
+        textColor: "text-white",
         buttonTextColor: "text-white",
         buttonLabel:"Contact us",
         icon: <ImLibrary className="subscription_icons enterprise"/>,