Commit d8a97120 authored by Mathias Engelbrecht Pilegård's avatar Mathias Engelbrecht Pilegård
Browse files

added ability to fetch messages from web-api utilizing custom hook

parent c04cf67d
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\home\\\\updates\\\\Updates.jsx\",\n _s = $RefreshSig$();\n\nimport React from 'react';\nimport \"./Updates.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport useMessages from '../../../util/useMessages';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst Updates = () => {\n _s();\n\n const messages = useMessages();\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"project-updates-new-messages-container\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"project-updates-display-container\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"project-updates-display-header\",\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"exclamation\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 15,\n columnNumber: 13\n }, this), \"\\xA0\\xA0New project updates\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 14,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 13,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"project-updates-display-content\",\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"project-update-entry\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"entry-text\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"upper-row\",\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n children: \"[project] [new issues] [issues fixed]\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 23,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 22,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"bottom-row\",\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n children: \"[team] [time]\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 28,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 27,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 21,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"entry-icon\",\n icon: \"chevron-right\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 20,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 19,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 12,\n columnNumber: 7\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"new-messages-display-container\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"new-messages-display-header\",\n children: /*#__PURE__*/_jsxDEV(\"p\", {\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 13\n }, this), \"\\xA0\\xA0New messages\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"new-messages-display-content\",\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"new-message-entry\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"entry-text\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"upper-row\",\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n children: \"[Sender] [Channel]\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 51,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"bottom-row\",\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n children: \"[team] [time]\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 56,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 55,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"entry-icon\",\n icon: \"chevron-right\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 62,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 61,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 47,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 7\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 10,\n columnNumber: 5\n }, this);\n};\n\n_s(Updates, \"XN0E2gtL1gAmm+PNrJbqZSrG6t4=\", false, function () {\n return [useMessages];\n});\n\n_c = Updates;\nexport default Updates;\n\nvar _c;\n\n$RefreshReg$(_c, \"Updates\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/home/updates/Updates.jsx"],"names":["React","FontAwesomeIcon","useMessages","Updates","messages"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAO,eAAP;AACA,SAASC,eAAT,QAAgC,gCAAhC;AACA,OAAOC,WAAP,MAAwB,2BAAxB;;;AAEA,MAAMC,OAAO,GAAG,MAAM;AAAA;;AACpB,QAAMC,QAAQ,GAAGF,WAAW,EAA5B;AAEA,sBACE;AAAK,IAAA,SAAS,EAAC,wCAAf;AAAA,4BAEE;AAAK,MAAA,SAAS,EAAC,mCAAf;AAAA,8BACE;AAAK,QAAA,SAAS,EAAC,gCAAf;AAAA,+BACE;AAAA,kCACE,QAAC,eAAD;AAAiB,YAAA,IAAI,EAAC;AAAtB;AAAA;AAAA;AAAA;AAAA,kBADF;AAAA;AAAA;AAAA;AAAA;AAAA;AADF;AAAA;AAAA;AAAA;AAAA,cADF,eAOE;AAAK,QAAA,SAAS,EAAC,iCAAf;AAAA,+BACE;AAAK,UAAA,SAAS,EAAC,sBAAf;AAAA,kCACE;AAAK,YAAA,SAAS,EAAC,YAAf;AAAA,oCACE;AAAK,cAAA,SAAS,EAAC,WAAf;AAAA,qCACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADF;AAAA;AAAA;AAAA;AAAA,oBADF,eAME;AAAK,cAAA,SAAS,EAAC,YAAf;AAAA,qCACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADF;AAAA;AAAA;AAAA;AAAA,oBANF;AAAA;AAAA;AAAA;AAAA;AAAA,kBADF,eAaE;AAAA,mCACE,QAAC,eAAD;AAAiB,cAAA,SAAS,EAAC,YAA3B;AAAwC,cAAA,IAAI,EAAC;AAA7C;AAAA;AAAA;AAAA;AAAA;AADF;AAAA;AAAA;AAAA;AAAA,kBAbF;AAAA;AAAA;AAAA;AAAA;AAAA;AADF;AAAA;AAAA;AAAA;AAAA,cAPF;AAAA;AAAA;AAAA;AAAA;AAAA,YAFF,eA8BE;AAAK,MAAA,SAAS,EAAC,gCAAf;AAAA,8BACE;AAAK,QAAA,SAAS,EAAC,6BAAf;AAAA,+BACE;AAAA,kCACE,QAAC,eAAD;AAAiB,YAAA,IAAI,EAAC;AAAtB;AAAA;AAAA;AAAA;AAAA,kBADF;AAAA;AAAA;AAAA;AAAA;AAAA;AADF;AAAA;AAAA;AAAA;AAAA,cADF,eAOE;AAAK,QAAA,SAAS,EAAC,8BAAf;AAAA,+BACE;AAAK,UAAA,SAAS,EAAC,mBAAf;AAAA,kCACE;AAAK,YAAA,SAAS,EAAC,YAAf;AAAA,oCACE;AAAK,cAAA,SAAS,EAAC,WAAf;AAAA,qCACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADF;AAAA;AAAA;AAAA;AAAA,oBADF,eAME;AAAK,cAAA,SAAS,EAAC,YAAf;AAAA,qCACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADF;AAAA;AAAA;AAAA;AAAA,oBANF;AAAA;AAAA;AAAA;AAAA;AAAA,kBADF,eAaE;AAAA,mCACE,QAAC,eAAD;AAAiB,cAAA,SAAS,EAAC,YAA3B;AAAwC,cAAA,IAAI,EAAC;AAA7C;AAAA;AAAA;AAAA;AAAA;AADF;AAAA;AAAA;AAAA;AAAA,kBAbF;AAAA;AAAA;AAAA;AAAA;AAAA;AADF;AAAA;AAAA;AAAA;AAAA,cAPF;AAAA;AAAA;AAAA;AAAA;AAAA,YA9BF;AAAA;AAAA;AAAA;AAAA;AAAA,UADF;AA4DD,CA/DD;;GAAMC,O;UACaD,W;;;KADbC,O;AAiEN,eAAeA,OAAf","sourcesContent":["import React from 'react'\r\nimport \"./Updates.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport useMessages from '../../../util/useMessages'\r\n\r\nconst Updates = () => {\r\n const messages = useMessages()\r\n\r\n return (\r\n <div className=\"project-updates-new-messages-container\">\r\n\r\n <div className=\"project-updates-display-container\">\r\n <div className=\"project-updates-display-header\">\r\n <p>\r\n <FontAwesomeIcon icon=\"exclamation\"></FontAwesomeIcon>\r\n &nbsp;&nbsp;New project updates\r\n </p>\r\n </div>\r\n <div className=\"project-updates-display-content\">\r\n <div className=\"project-update-entry\">\r\n <div className=\"entry-text\">\r\n <div className=\"upper-row\">\r\n <a>\r\n [project] [new issues] [issues fixed]\r\n </a>\r\n </div>\r\n <div className=\"bottom-row\">\r\n <a>\r\n [team] [time]\r\n </a>\r\n </div>\r\n </div>\r\n <div>\r\n <FontAwesomeIcon className=\"entry-icon\" icon=\"chevron-right\"></FontAwesomeIcon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div className=\"new-messages-display-container\">\r\n <div className=\"new-messages-display-header\">\r\n <p>\r\n <FontAwesomeIcon icon=\"envelope\"></FontAwesomeIcon>\r\n &nbsp;&nbsp;New messages\r\n </p>\r\n </div>\r\n <div className=\"new-messages-display-content\">\r\n <div className=\"new-message-entry\">\r\n <div className=\"entry-text\">\r\n <div className=\"upper-row\">\r\n <a>\r\n [Sender] [Channel]\r\n </a>\r\n </div>\r\n <div className=\"bottom-row\">\r\n <a>\r\n [team] [time]\r\n </a>\r\n </div>\r\n </div>\r\n <div>\r\n <FontAwesomeIcon className=\"entry-icon\" icon=\"chevron-right\"></FontAwesomeIcon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nexport default Updates"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
......@@ -16,6 +16,7 @@ import ProjectOverview from "./components/project/projectOverview/ProjectOvervie
import ProjectInfo from "./components/project/projectInfo/ProjectInfo"
import TeamOverview from "./components/team/teamOverview/TeamOverview"
import TeamInfo from "./components/team/teamInfo/TeamInfo"
import Messages from "./components/Messages/Messages"
library.add(fas)
......@@ -40,6 +41,7 @@ const App = () => {
<SecureRoute path="/ReactApp" component={ProjectInfo} />
<SecureRoute path="/teams" component={TeamOverview} />
<SecureRoute path="/HenriksMemeMachine" component={TeamInfo} />
<SecureRoute path="/messages" component={Messages} />
</Switch>
</Security>
)
......
import React from 'react'
import useMessages from "../../util/useMessages"
const Messages = () => {
const messages = useMessages()
if (messages) {
return (
<div className="page-content-container">
{messages.map((message) => (
<tr id={message.id} key={message.id}>
<td>{message.date}</td>
<td>{message.sender}</td>
<td>{message.text}</td>
</tr>
))}
</div>
)
} else return (
<div className="page-content-container">
<h3>Fetching messages...</h3>
</div>
)
}
export default Messages
.homepage-container{
background: white;
padding: 0 20px 0 20px;
}
.homepage-container .content-header {
.page-content-container .content-header {
display: flex;
padding: 15px 0 0 0;
justify-content: space-between;
......@@ -11,7 +6,7 @@
}
.homepage-container .content-header .welcome-text {
.page-content-container .content-header .welcome-text {
margin: 3px 0 19px 0;
}
......@@ -26,6 +21,6 @@
text-decoration: none;
}
.homepage-container .homepage-content {
.page-content-container .homepage-content {
display: flex;
}
\ No newline at end of file
......@@ -12,35 +12,22 @@ const Home = () => {
setUserInfo(idToken)
}, [])
if (userInfo) {
return (
<div className="homepage-container">
<div className="content-header">
<h2 className="welcome-text">Welcome {userInfo.name}!</h2>
<NavLink to="/reportissue">
<button className="report-new-issue-button">
<FontAwesomeIcon icon="exclamation-triangle"></FontAwesomeIcon>
&nbsp;&nbsp;Report issues
</button>
</NavLink>
</div>
<div className="homepage-content">
<Updates />
</div>
return (
<div className="page-content-container">
<div className="content-header">
<h2 className="welcome-text">Welcome {userInfo ? userInfo.name : "..."}!</h2>
<NavLink to="/reportissue">
<button className="report-new-issue-button">
<FontAwesomeIcon icon="exclamation-triangle"></FontAwesomeIcon>
&nbsp;&nbsp;Report issues
</button>
</NavLink>
</div>
)
}
else {
// Render a loading placeholder while user data gets loaded from localstorage
return (
<div className="homepage-container">
<h3>...</h3>
<div className="homepage-content">
<Updates />
</div>
)
}
</div>
)
}
export default Home
\ No newline at end of file
import React from 'react'
import "./Updates.css"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import useMessages from '../../../util/useMessages'
const Updates = () => {
const messages = useMessages()
return (
<div className="project-updates-new-messages-container">
......@@ -41,25 +44,27 @@ const Updates = () => {
&nbsp;&nbsp;New messages
</p>
</div>
<div className="new-messages-display-content">
<div className="new-message-entry">
<div className="entry-text">
<div className="upper-row">
<a>
[Sender] [Channel]
</a>
{messages.map((message) => (
<div className="new-messages-display-content">
<div className="new-message-entry">
<div className="entry-text">
<div className="upper-row">
<a>
[{message.sender}] [{message.id}]
</a>
</div>
<div className="bottom-row">
<a>
[team] [{message.date}]
</a>
</div>
</div>
<div className="bottom-row">
<a>
[team] [time]
</a>
<div>
<FontAwesomeIcon className="entry-icon" icon="chevron-right"></FontAwesomeIcon>
</div>
</div>
<div>
<FontAwesomeIcon className="entry-icon" icon="chevron-right"></FontAwesomeIcon>
</div>
</div>
</div>
))}
</div>
</div>
)
......
......@@ -2,7 +2,7 @@ import React from 'react'
import { useOktaAuth } from '@okta/okta-react';
import "./Navbar.css"
import Logo from './logo/Logo'
import NavLinks from './navigationLinks/NavLinks'
import NavLinks from './navLinks/NavLinks'
import Searchbar from './searchbar/Searchbar'
import NavbarDropdownMenu from './dropdownMenu/NavbarDropdownMenu'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
......
import React, { useRef, useState, useEffect } from 'react'
import { NavLink } from "react-router-dom";
import { useOktaAuth } from '@okta/okta-react';
import "./NavbarDropdownMenu.css"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
......@@ -48,10 +49,10 @@ const DropdownMenu = () => {
</a>
</li>
<li>
<a href="./">
<NavLink to="/messages">
<FontAwesomeIcon icon="envelope"></FontAwesomeIcon>&nbsp;&nbsp;Messages
<FontAwesomeIcon icon="chevron-right" className="arrow-right-icon"></FontAwesomeIcon>
</a>
</NavLink>
</li>
<li>
<a href="./">
......
.projectInformationPage-container{
.page-content-container {
background: white;
padding: 0 20px 0 20px;
}
.projectInformationPage-container .projectInformationPage-content-header {
.projectInformationPage-content-header {
display: flex;
padding: 15px 0 0 0;
justify-content: space-between;
border-bottom: 1px solid rgb(180, 180, 180);
}
.projectInformationPage-container .projectInformationPage-content-header .header-project-buttons button {
.projectInformationPage-content-header .header-project-buttons button {
background-color: rgb(32, 124, 202);
cursor: pointer;
border: none;
......@@ -21,11 +21,11 @@
text-decoration: none;
}
.projectInformationPage-container .projectInformationPage-content-header .projectInformationPage-title {
.projectInformationPage-content-header .projectInformationPage-title {
margin: 3px 0 19px 0;
}
.projectInformationPage-container .dashboard-activity-container {
.dashboard-activity-container {
display:flex;
justify-content: space-between;
}
\ No newline at end of file
......@@ -7,7 +7,7 @@ import ActivitiesDisplay from './activitiesDisplay/ActivitiesDisplay'
const ProjectInfo = () => {
return (
<div className="projectInformationPage-container">
<div className="page-content-container">
<div className="projectInformationPage-content-header">
<div className="header-text">
<h2 className="projectInformationPage-title">ReactApp > Activity Dashboard</h2>
......
......@@ -63,7 +63,7 @@ const ProjectOverview = () => {
}
return (
<div className="projectlist-container">
<div className="page-content-container">
<div className="content-header">
<h2 className="projectlist-title">Your Projects</h2>
<button className="create-new-project-button">
......
.projectlist-container{
background: white;
padding: 0 20px 0 20px;
}
.projectlist-container .content-header {
.page-content-container .content-header {
display: flex;
padding: 15px 0 0 0;
justify-content: space-between;
border-bottom: 1px solid rgb(180, 180, 180);
}
.projectlist-container .content-header .projectlist-title {
.page-content-container .content-header .projectlist-title {
margin: 3px 0 15px 0;
}
......@@ -74,12 +69,12 @@
border-color: grey;
}
.projectlist-container .projectlist ul {
.projectlist ul {
margin: 0;
padding: 0;
}
.projectlist-container .projectlist .project-entry {
.projectlist .project-entry {
background: rgb(250, 250, 250);
display: flex;
justify-content: space-between;
......@@ -87,46 +82,46 @@
border-bottom: 1px solid lightgrey;
}
.projectlist-container .projectlist .project-entry .project-team-name a {
.projectlist .project-entry .project-team-name a {
display: flex;
font-size: 14px;
color: black;
}
.projectlist-container .projectlist .project-entry .project-team-name a .icon{
.projectlist .project-entry .project-team-name a .icon{
padding-top: 4px;
}
.projectlist-container .projectlist .project-entry .project-team-name a:hover {
.projectlist .project-entry .project-team-name a:hover {
cursor: pointer;
text-decoration: underline;
}
.projectlist-container .projectlist .project-entry .project-status-info-container {
.projectlist .project-entry .project-status-info-container {
display: flex;
justify-content: flex-end;
}
.projectlist-container .projectlist .project-entry .project-status-info-container * {
.projectlist .project-entry .project-status-info-container * {
position: relative;
display: flex;
margin: 0 0 0 12px;
font-size: 14px;
}
.projectlist-container .projectlist .project-entry .project-status-info-container .last-updated-info {
.projectlist .project-entry .project-status-info-container .last-updated-info {
margin: 0 0 0 45px;
}
.projectlist-container .projectlist .project-entry .project-status-info-container * p {
.projectlist .project-entry .project-status-info-container * p {
margin-left: 3px;
}
.projectlist-container .projectlist .project-entry .project-status-info-container * .icon {
.projectlist .project-entry .project-status-info-container * .icon {
padding-top: 3px;
}
.projectlist-container .projectlist .project-entry .project-status-info-container * .tooltip-text {
.projectlist .project-entry .project-status-info-container * .tooltip-text {
visibility: hidden;
width: 105px;
background-color: black;
......@@ -143,7 +138,7 @@
margin-left: -60px;
}
.projectlist-container .projectlist .project-entry .project-status-info-container * .tooltip-text::after {
.projectlist .project-entry .project-status-info-container * .tooltip-text::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
......@@ -154,8 +149,8 @@
border-color: transparent transparent black transparent;
}
.projectlist-container .projectlist .project-entry .project-status-info-container *:hover .tooltip-text,
.projectlist-container .projectlist .project-entry .project-status-info-container * .icon:hover .tooltip-text{
.projectlist .project-entry .project-status-info-container *:hover .tooltip-text,
.projectlist .project-entry .project-status-info-container * .icon:hover .tooltip-text{
visibility: visible;
}
......@@ -5,7 +5,7 @@ import Assign from './assign/Assign'
const ReportForm = () => {
return (
<div className="reportForm-container">
<div className="page-content-container">
<h2 className="reportissuePageText">Report an issue</h2>
<form action="/reportFormData">
<div className="row">
......
......@@ -2,9 +2,8 @@
box-sizing: border-box;
}
.reportForm-container {
background: white;
padding: 20px;
.page-content-container h2 {
margin-top: 20px;
}
.reportissuePageText {
......
.teamInformationPage-container{
background: white;
padding: 0 20px 0 20px;
}
.teamInformationPage-container .teamInformationPage-content-header {
.teamInformationPage-content-header {
display: flex;
padding: 15px 0 0 0;
justify-content: space-between;
border-bottom: 1px solid rgb(180, 180, 180);
}
.teamInformationPage-container .teamInformationPage-content-header .header-notification-select-settings-button-container {
.teamInformationPage-content-header .header-notification-select-settings-button-container {
display: flex;
}
......@@ -64,11 +59,11 @@
text-decoration: none;
}
.teamInformationPage-container .teamInformationPage-content-header .teamInformationPage-title {
.teamInformationPage-content-header .teamInformationPage-title {
margin: 3px 0 19px 0;
}
.teamInformationPage-container .teamInformationPage-content-container {
.teamInformationPage-content-container {
display:flex;
justify-content: space-between;
}
\ No newline at end of file
......@@ -26,7 +26,7 @@ const TeamInfo = () => {
}, [isActive]);
return (
<div className="teamInformationPage-container">
<div className="page-content-container">
<div className="teamInformationPage-content-header">
<div className="header-text">
<h2 className="teamInformationPage-title">Henriks Meme machine > overview</h2>
......
......@@ -16,7 +16,7 @@ const TeamOverview = () => {
]
return (
<div className="teamlist-container">
<div className="page-content-container">
<div className="content-header">
<h2 className="teamlist-title">Teams</h2>
<div className="buttons-container">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment