feat: add workspace page

docker-compose.yaml

@@ -1,11 +1,11 @@
 version: '3.3'
 services:
   api:
-   build: 
-     context: ./
-     dockerfile: local.Dockerfile 
-   volumes:
-     - ./:/app
-     - ./.m2:/root/.m2
-   working_dir: /app 
-   command: sh run.sh
+    build:
+      context: ./
+      dockerfile: local.Dockerfile
+    volumes:
+      - ./:/app
+      - ./.m2:/root/.m2
+    working_dir: /app
+    command: sh run.sh

src/app/api/file.ts

@@ -1,23 +1,17 @@
 import axios, { AxiosResponse } from 'axios';
 import { BACKEND_URL } from 'envConstants';
 
-
-export interface FileUpload{
-
-  message: string,
-  isSuccessful: boolean,
-  statusCode: number,
-
+export interface FileUpload {
+  message: string;
+  isSuccessful: boolean;
+  statusCode: number;
 }
 
-
-
-
 export const uploadIcon = async (
   authorizationToken: string,
   orgName: string,
   file: File
-):Promise<AxiosResponse<FileUpload>> => {
+): Promise<AxiosResponse<FileUpload>> => {
   const url = BACKEND_URL + '/api/protected/file/upload/' + orgName;
   const formData = new FormData();
   formData.append('file', file);

src/app/api/login.ts

@@ -2,15 +2,16 @@ import axios from 'axios';
 import { BACKEND_URL } from 'envConstants';
 import { AxiosResponse } from 'axios';
 
-
-export interface LoginData{
-  token: string,
-  username: string,
-  type: string,
-  id: number
+export interface LoginData {
+  token: string;
+  username: string;
+  type: string;
+  id: number;
 }
 
-export const login = async (code: string):Promise<AxiosResponse<LoginData>> => {
+export const login = async (
+  code: string
+): Promise<AxiosResponse<LoginData>> => {
   const url = BACKEND_URL + '/api/auth/login';
   const respnse = await axios.post<LoginData>(
     url,

src/app/api/organization.ts

@@ -6,13 +6,12 @@ export interface organizationBody {
   description: string;
 }
 
-
-export interface AllOrgs{
+export interface AllOrgs {
   organizations: {
-    id: number,
-    name: string,
-    description: string|null
-  }[]
+    id: number;
+    name: string;
+    description: string | null;
+  }[];
 }
 
 export const deleteOrg = async (
@@ -204,7 +203,9 @@ export const getOrg = async (authorizationToken: string, orgName: string) => {
   return respnse;
 };
 
-export const getAllOrgs = async (authorizationToken: string): Promise<AxiosResponse<AllOrgs>> => {
+export const getAllOrgs = async (
+  authorizationToken: string
+): Promise<AxiosResponse<AllOrgs>> => {
   const url = BACKEND_URL + '/api/protected/org/getAllOrg';
   const respnse = await axios.get<AllOrgs>(url, {
     headers: {

src/app/api/user.ts

@@ -1,38 +1,36 @@
-import axios,{AxiosResponse} from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { BACKEND_URL } from 'envConstants';
 
-
-
-
-export interface UserData{
-  message: string
+export interface UserData {
+  message: string;
 }
 
-
-
-export interface AllUserData{
+export interface AllUserData {
   users: {
-    id: number,
-    username: string
-  }[]
+    id: number;
+    username: string;
+  }[];
 }
 
-export const getUser= async (authorizationToken: string):Promise<AxiosResponse<UserData>> => {
+export const getUser = async (
+  authorizationToken: string
+): Promise<AxiosResponse<UserData>> => {
   const url = BACKEND_URL + '/api/protected/user/getUser';
 
-    const respnse = await axios.get<UserData>(url, {
-      headers: {
-        Accept: 'application/json',
-
-        Authorization: `Bearer ${authorizationToken}`,
-      },
-    });
-
-    return respnse;
+  const respnse = await axios.get<UserData>(url, {
+    headers: {
+      Accept: 'application/json',
+
+      Authorization: `Bearer ${authorizationToken}`,
+    },
+  });
 
+  return respnse;
 };
 
-export const getAllUser = async (authorizationToken: string):Promise<AxiosResponse<AllUserData>> => {
+export const getAllUser = async (
+  authorizationToken: string
+): Promise<AxiosResponse<AllUserData>> => {
   const url = BACKEND_URL + '/api/protected/user/all';
   const respnse = await axios.get<AllUserData>(url, {
     headers: {

src/app/index.tsx

@@ -8,7 +8,7 @@ function App() {
     <>
       <Navbar />
       <BasicRoutes />
-      <Toaster/>
+      <Toaster />
     </>
   );
 }

src/app/state/action-creators/usersActions.ts

@@ -17,4 +17,3 @@ export const setAllUsernames = (usernames: string[]) => {
     });
   };
 };
-

src/features/AddWorkspace/index.scss

@@ -0,0 +1,162 @@
+$breakpoint-tablet: 768px;
+.main_aworkspace_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: max-content;
+  padding: 2rem;
+  .addworkspace-form-container {
+    background: linear-gradient(110.51deg, #141432 0.9%, #2a2a4b 101.51%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 2rem 1rem;
+    border-radius: 1.25rem;
+    gap: 2rem;
+    .submit {
+      display: flex;
+      padding: 1rem 2rem;
+      align-self: flex-end;
+      font-size: 1.5rem;
+      border-radius: 0.875rem;
+      background: #402aa4;
+      color: white;
+      outline: none;
+      border: none;
+    }
+  }
+
+  .single-form-element-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    .label {
+      color: #8181ff;
+      font-size: 1.5rem;
+      font-weight: 900;
+    }
+  }
+}
+
+.custom-input {
+  box-sizing: border-box;
+  border: 0.8px solid #402aa4;
+  border-radius: 14px;
+  background-color: transparent;
+  align-items: flex-start;
+  color: rgba(173, 173, 255, 0.75);
+  padding: 1.5rem 1rem;
+  font-size: 1.25rem;
+  font-family: 'Poppins';
+  outline: none;
+}
+
+.custom-input::placeholder {
+  color: rgba(173, 173, 255, 0.75);
+  font-family: Poppins;
+  font-size: 1.25rem;
+  font-weight: 100;
+  line-height: normal;
+}
+
+.file-input-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 30rem;
+  padding: 2rem;
+  border-radius: 1.25rem;
+  background: linear-gradient(
+    138deg,
+    rgba(20, 20, 50, 0.7) 5.19%,
+    rgba(20, 20, 50, 0.7) 97.11%
+  );
+  backdrop-filter: blur(25px);
+
+  .custom-file-input {
+    visibility: hidden;
+  }
+  .file-label {
+    width: fit-content;
+    padding: 0.4375rem 0.5625rem;
+    border-radius: 1.75rem;
+    background: #402aa4;
+    color: white;
+  }
+}
+
+.add-member-container {
+  position: relative;
+  box-sizing: border-box;
+  border: 0.8px solid #402aa4;
+  border-radius: 14px;
+  display: flex;
+  flex-direction: row;
+  outline: #141432;
+  .custom-input {
+    display: flex;
+    width: 100%;
+    border: none;
+    outline: none;
+  }
+  button {
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.25rem;
+    margin: 0.75rem 1rem;
+    color: white;
+    width: 7rem;
+    font-weight: 100 !important;
+    border-radius: 2.3125rem;
+    background: #402aa4;
+  }
+}
+
+.added-members {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+  flex-wrap: wrap;
+  width: 100%;
+  .member-card {
+    display: inline-flex;
+    padding: 0.4375rem 0.875rem 0.625rem 0.875rem;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5625rem;
+    color: #8989ce;
+    border-radius: 0.75rem;
+    background: #26264e;
+    .member-avatar {
+      width: 40px;
+      height: 40px;
+    }
+    .btn-cross {
+      appearance: none;
+      border: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: transparent;
+    }
+  }
+}
+
+@media (min-width: $breakpoint-tablet) {
+  .main_aworkspace_container {
+    padding: 2rem 5rem;
+    .addworkspace-form-container {
+      padding: 2rem 5rem;
+    }
+  }
+}