Task #216354 - UI for Direct connection

ManojNathIC · Mar 27, 2024 · 95f3e59 · 95f3e59
1 parent 6c7382e
commit 95f3e59
Show file tree

Hide file tree

Showing 14 changed files with 1,141 additions and 9 deletions.
diff --git a/module-template/src/index.css b/module-template/src/index.css
@@ -1,4 +1,4 @@
-body {
+/* body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
@@ -10,4 +10,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
+} */
diff --git a/module-template/src/stories/button.css b/module-template/src/stories/button.css
@@ -1,5 +1,5 @@
 .storybook-button {
-  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  /* font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; */
   font-weight: 700;
   border: 0;
   border-radius: 3em;

diff --git a/packages/nulp_elite/public/index.html b/packages/nulp_elite/public/index.html
@@ -46,7 +46,7 @@
     -->
     <title>Shiksha</title>
   </head>
-  <body style="background-color: rgb(248, 248, 249)">
+  <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/packages/nulp_elite/src/App.css b/packages/nulp_elite/src/App.css
@@ -6,7 +6,10 @@
   height: 40vmin;
   pointer-events: none;
 }
-
+.PrivateTabIndicator-colorSecondary-5 {
+  background-color:' #004367' !important;
+  padding:'10px'
+}
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;

diff --git a/packages/nulp_elite/src/App.js b/packages/nulp_elite/src/App.js
@@ -88,12 +88,12 @@ function App() {
     },
     {
       moduleName: "nulp_elite",
-      path: "/AddConnections",
+      path: "/connections/addConnections",
       component: AddConnections,
     },
     {
       moduleName: "nulp_elite",
-      path: "/MyConnections",
+      path: "/connections/myConnections",
       component: MyConnections,
     },
     {

diff --git a/packages/nulp_elite/src/assets/card-bg.png b/packages/nulp_elite/src/assets/card-bg.png
diff --git a/packages/nulp_elite/src/components/Card.js b/packages/nulp_elite/src/components/Card.js
@@ -0,0 +1,37 @@
+import React from "react";
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { Opacity } from "@mui/icons-material";
+
+
+export default function BoxCard({  }) {
+
+  return (
+    <Card sx={{ maxWidth: 345, position:'relative' }}>
+      <CardMedia
+        sx={{ height: 140,position: 'relative', opacity: 0.6 }}
+        image={require("../assets/card-bg.png")}
+        title="green iguana"
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div" style={{position:'absolute',color:'#fff',fontWeight:'500',fontSize:'16px', top:'30px'}}>
+        Enable GIS monitoring for SWM
+        </Typography>
+        <Typography gutterBottom variant="h7" component="div" style={{position:'absolute',top:'50px',right:'10px'}}>
+        Courses
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+        Engineering Staff College India
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">SWM</Button>
+        <Button size="small">Sanitation</Button>
+      </CardActions>
+    </Card>
+  );
+}
diff --git a/packages/nulp_elite/src/components/search.js b/packages/nulp_elite/src/components/search.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { Button } from '@mui/base/Button';
+
+
+export default function Search({  }) {
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
+    <input type="text" placeholder="Search..." style={{ flex: 1, marginRight: '0.5rem', padding: '0.5rem', borderRadius: '4px', border: '1px solid #CACACA' }} />
+    <Button style={{ padding:'11px 16px 11px 16px', borderRadius: '4px', backgroundColor: '#004367', color: 'white', border: '1px', cursor: 'pointer' ,fontSize:'12px'}}>Search</Button>
+  </div>
+  );
+}
diff --git a/packages/nulp_elite/src/index.css b/packages/nulp_elite/src/index.css
@@ -1,4 +1,4 @@
-body {
+/* body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
@@ -10,4 +10,8 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
+} */
+
+.css-132u4s-MuiFormControl-root-MuiTextField-root{
+  width:'100%',
+}