Merge remote-tracking branch 'origin/develop' into tests/e2e-POC

argentlabs · Nov 15, 2024 · 64af238 · 64af238
2 parents 2d31db6 + 9c5a537
commit 64af238
Show file tree

Hide file tree

Showing 40 changed files with 1,612 additions and 692 deletions.
diff --git a/package.json b/package.json
@@ -33,11 +33,14 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8",
     "eslint-config-next": "15.0.2",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5"
   },
   "lint-staged": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/starknet_logo.png b/public/starknet_logo.png
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,7 +1,16 @@
+/* app/globals.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Your custom CSS here */
+
 html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
+  background-color: #000;
+  color: #fff;
 }
 
 body {
@@ -21,105 +30,291 @@ a {
   text-decoration: none;
 }
 
-.full {
-  width: 100%;
+.column {
+  flex-direction: column;
 }
 
-/* Accordion */
-
-.accordion-button {
-  width: 100%;
+/* Button -- START */
+button {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 24px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  border: none;
+  background-color: #262933;
+  color: #fff;
+  border-radius: 8px;
+  padding: 12px;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  background-color: transparent;
-  border: none;
+  justify-content: space-between;
   cursor: pointer;
-  transition: background-color 0.2s;
-  padding: 16px 0;
+  gap: 4px;
+  position: relative;
 }
 
-.accordion-button-with-border {
-  padding: 8px;
+button.sections-list-button {
+  background-color: #14161c;
+  color: #6f727c;
 }
 
-.accordion-title {
-  font-weight: bold;
-  font-size: 1.5em;
+button:not(.selected, :disabled):hover {
+  background-color: #464c5e;
 }
 
-.accordion-title-with-border {
-  font-size: 1em;
+button.disabled {
+  opacity: 0.4;
+  cursor: default;
 }
 
-.accordion-icon {
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s;
+button.selected {
+  background-color: #aecbfc;
+  color: #090e12;
 }
 
-.accordion-icon-open {
-  transform: rotate(180deg);
+button.connector {
+  background-color: #464c5e;
+  height: 40px;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 500;
+  gap: 8px;
+  justify-content: center;
 }
 
-.accordion-content {
-  overflow: hidden;
-  transition: max-height 0.2s ease-out;
-  max-height: 0;
+button.connector > div {
+  gap: 8px;
+  align-items: center;
 }
 
-.accordion-content-open {
-  max-height: 500px;
+.connectors-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
 }
 
-/* Button  */
-button {
-  border: 1px solid #c8c8c8;
-  background-color: transparent;
-  border-radius: 8px;
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  gap: 4px;
-  font-weight: bold;
-}
+/* Button -- END */
 
 .chevron-right {
   width: 16px;
   height: 16px;
   transition: transform 0.2s;
   transform: rotate(-90deg);
+  color: #090e12;
+}
+
+.chevron-down {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.2s;
+  color: #6f727c;
+}
+
+.chevron-up {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.2s;
+  color: #6f727c;
+  transform: rotate(-180deg);
+}
+
+.chevron-left {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.2s;
+  color: #6f727c;
+  transform: rotate(-270deg);
 }
 
 input,
 textarea {
   padding: 8px;
   border-radius: 8px;
-  border: 1px solid #c8c8c8;
+  border: 1px solid #464c5e;
+  background-color: #14161c;
+  color: #a2a2a2;
 }
 
 button[type="submit"] {
-  background-color: #cefff3;
+  border: solid 1px #85b6ff;
+  color: #85b6ff;
+  text-align: center;
 }
 
-.demo-dapp-container {
-  padding: 40px 0;
+/* Header */
+
+.header-container {
+  padding: 32px 116px 16px;
 }
 
-/* Small screens (smartphones) - Portrait and Landscape */
-@media only screen and (max-width: 767px) {
-  .demo-dapp-container {
-    padding: 20px;
-  }
-  /* Your mobile styles here */
+.header-profile-container {
+  background-color: #14161c;
+  border-radius: 12px;
+  gap: 12px;
+  padding: 16px;
+}
+
+.header-title {
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 24px;
+  letter-spacing: 1%;
+  margin-top: 2px;
 }
 
-/* Extra small screens (smaller smartphones) */
-@media only screen and (max-width: 480px) {
-  /* Your styles for very small devices */
-  .demo-dapp-container {
-    padding: 16px;
+.header-account-separator {
+  border-left: solid 1px #464c5e;
+  margin: -4px 0;
+}
+
+/* Header - END */
+
+/* Section */
+.section-layout-heading {
+  gap: 8px;
+  position: relative;
+  border-bottom: solid 1px #262933;
+  padding-bottom: 16px;
+}
+
+.section-layout-container {
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  background-color: #14161c;
+  padding: 24px;
+  border-radius: 12px;
+  height: fit-content;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+}
+
+.connector-icon {
+  height: 17px;
+  width: 17px;
+}
+
+.connector-icon > svg {
+  height: 17px;
+  width: 17px;
+}
+
+.get-started-title {
+  font-size: 48px;
+  font-weight: 600;
+  line-height: 58px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: "#FFF";
+}
+
+.get-started-title::before {
+  content: "Manage ";
+}
+
+.get-started-title::after {
+  content: " Starknet accounts";
+}
+
+.get-started-title {
+  color: #6f727c;
+}
+
+.get-started-title::before,
+.get-started-title::after {
+  color: #fff;
+}
+
+.get-started-subtitle {
+  color: #6f727c;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+}
+
+/* Section */
+
+/* Status -- Start */
+.status-grid-container {
+  /* Create a grid with auto-fill columns, minimum 200px width */
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  /* Limit to maximum 4 columns using max-width */
+  max-width: 800px;
+  width: 100%;
+  gap: 80px;
+}
+
+.status-grid-item-title {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 14px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: #6f727c;
+}
+
+.status-grid-item-value {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  display: flex;
+  align-items: center;
+}
+
+.truncate {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: top;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Ensure no more than 4 columns at any viewport width */
+@media (min-width: 1000px) {
+  .status-grid-container {
+    grid-template-columns: repeat(4, 1fr);
   }
 }
+/* Status -- End */
+
+/* Sections list */
+.sections-container {
+  gap: 180px;
+  background-color: #090e12;
+  padding: 76px 116px;
+  flex: 1;
+  height: 100%;
+}
+
+/* Section list - End */
+
+/* Connection -- Start */
+
+.starknet-react-connectors-title {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+}
+/* Connection -- End */