mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-10-02 05:24:56 +08:00
tailwind css to popup
This commit is contained in:
Mahesh Sanikommmu
@@ -1,3 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Custom Font Definitions */
|
||||
@font-face {
|
||||
font-family: "Space Grotesk";
|
||||
@@ -38,671 +40,3 @@
|
||||
font-display: swap;
|
||||
src: url("/fonts/SpaceGrotesk-Bold.ttf") format("truetype");
|
||||
}
|
||||
|
||||
.popup-container {
|
||||
width: 320px;
|
||||
padding: 0;
|
||||
font-family:
|
||||
"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
sans-serif;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-sign-out {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #6c757d;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.header-sign-out:hover {
|
||||
color: #000000;
|
||||
background-color: #f1f3f4;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-indicator.signed-in {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.status-indicator.signed-out {
|
||||
background-color: #666666;
|
||||
}
|
||||
|
||||
.sign-out-btn {
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
background-color: #000000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sign-out-btn:hover {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.instruction {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #1976d2;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
font-size: 13px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
.authenticated {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.unauthenticated {
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* Login Screen Styles */
|
||||
.login-intro {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.features-list li {
|
||||
padding: 6px 0;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.features-list li::before {
|
||||
content: "•";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-actions {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.login-help {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 14px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.help-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #4285f4;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.help-link:hover {
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
.login-primary-btn {
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
background-color: #374151;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.login-primary-btn:hover:not(:disabled) {
|
||||
background-color: #1f2937;
|
||||
}
|
||||
|
||||
.login-primary-btn:disabled {
|
||||
background-color: #9e9e9e;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Tab Navigation Styles */
|
||||
.tab-navigation {
|
||||
display: flex;
|
||||
background-color: #f1f3f4;
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
padding: 8px 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #6c757d;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.tab-btn:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tab-btn:active {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tab-btn:hover:not(.active) {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
/* Tab Content */
|
||||
.tab-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
/* Save Action at Bottom */
|
||||
.save-action {
|
||||
margin-top: auto;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
/* Import Actions */
|
||||
.import-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.import-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.import-instructions {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #6c757d;
|
||||
line-height: 1.3;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
/* Save Section Styles */
|
||||
.save-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.current-page {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
background-color: #f8f9fa;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.page-url {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #6c757d;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.save-page-btn {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background-color: #1976d2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.save-page-btn:hover:not(:disabled) {
|
||||
background-color: #1565c0;
|
||||
}
|
||||
|
||||
.save-page-btn:disabled {
|
||||
background-color: #9e9e9e;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.secondary-actions {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background-color: white;
|
||||
color: #6c757d;
|
||||
border: 1px solid #e4e6eb;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.secondary-btn:hover {
|
||||
background-color: #f8f9fa;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.chatgpt-btn {
|
||||
width: 100%;
|
||||
padding: 12px 12px;
|
||||
background-color: white;
|
||||
color: black;
|
||||
border: 1px solid #e4e6eb;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.chatgpt-btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
border-color: #e4e6eb;
|
||||
}
|
||||
|
||||
.chatgpt-logo {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.twitter-btn {
|
||||
width: 100%;
|
||||
padding: 12px 12px;
|
||||
background-color: white;
|
||||
color: black;
|
||||
border: 1px solid #e4e6eb;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.2s ease;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.twitter-btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
border-color: #e4e6eb;
|
||||
}
|
||||
|
||||
.twitter-btn:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.twitter-logo {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Project Selection Styles */
|
||||
.project-section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.project-selector-btn {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.project-selector-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e9ecef;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.project-selector-btn:hover .project-selector-content {
|
||||
background-color: #e9ecef;
|
||||
border-color: #ced4da;
|
||||
}
|
||||
|
||||
.project-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.project-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.project-arrow {
|
||||
color: #6c757d;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.project-selector-btn:hover .project-arrow {
|
||||
color: #495057;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.project-count {
|
||||
font-size: 12px;
|
||||
color: #6c757d;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.project-none {
|
||||
font-size: 14px;
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Project Selector Modal */
|
||||
.project-selector {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.project-selector-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.project-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.project-logout-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
color: #6c757d;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.project-logout-btn:hover {
|
||||
color: #dc3545;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.project-logout-btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.project-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #6c757d;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.project-close-btn:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.project-loading {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.project-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.project-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
border-bottom: 1px solid #f1f3f4;
|
||||
background: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.project-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.project-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.project-item.selected {
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
|
||||
.project-item-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.project-item-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.project-item-count {
|
||||
font-size: 12px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.project-item-check {
|
||||
color: #1976d2;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -115,12 +115,12 @@ function App() {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="popup-container">
|
||||
<div className="header">
|
||||
<img alt="supermemory" className="logo" src="/icon-48.png" />
|
||||
<h1>supermemory</h1>
|
||||
<div className="w-80 p-0 font-[Space_Grotesk,-apple-system,BlinkMacSystemFont,Segoe_UI,Roboto,sans-serif] bg-white rounded-lg relative overflow-hidden">
|
||||
<div className="flex items-center justify-between gap-3 p-2.5 border-b border-gray-200 relative">
|
||||
<img alt="supermemory" className="w-8 h-8 flex-shrink-0" src="/icon-48.png" />
|
||||
<h1 className="m-0 text-lg font-semibold text-black flex-1">supermemory</h1>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="p-4">
|
||||
<div>Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,17 +128,17 @@ function App() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="popup-container">
|
||||
<div className="header">
|
||||
<div className="w-80 p-0 font-[Space_Grotesk,-apple-system,BlinkMacSystemFont,Segoe_UI,Roboto,sans-serif] bg-white rounded-lg relative overflow-hidden">
|
||||
<div className="flex items-center justify-between gap-3 p-2.5 border-b border-gray-200 relative">
|
||||
<img
|
||||
alt="supermemory"
|
||||
className="logo"
|
||||
className="w-8 h-8 flex-shrink-0"
|
||||
src="https://assets.supermemory.ai/brand/wordmark/dark-transparent.svg"
|
||||
style={{ width: "80%", height: "45px" }}
|
||||
/>
|
||||
{userSignedIn && (
|
||||
<button
|
||||
className="header-sign-out"
|
||||
className="bg-none border-none text-base cursor-pointer text-gray-500 p-1 rounded transition-colors duration-200 hover:text-black hover:bg-gray-100"
|
||||
onClick={handleSignOut}
|
||||
title="Logout"
|
||||
type="button"
|
||||
@@ -161,20 +161,28 @@ function App() {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="p-4">
|
||||
{userSignedIn ? (
|
||||
<div className="authenticated">
|
||||
<div className="text-left">
|
||||
{/* Tab Navigation */}
|
||||
<div className="tab-navigation">
|
||||
<div className="flex bg-gray-100 rounded-lg p-1 mb-4">
|
||||
<button
|
||||
className={`tab-btn ${activeTab === "save" ? "active" : ""}`}
|
||||
className={`flex-1 py-2 px-4 bg-transparent border-none rounded-md text-sm font-medium cursor-pointer transition-all duration-200 outline-none appearance-none ${
|
||||
activeTab === "save"
|
||||
? "bg-white text-black shadow-sm"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
onClick={() => setActiveTab("save")}
|
||||
type="button"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
className={`tab-btn ${activeTab === "imports" ? "active" : ""}`}
|
||||
className={`flex-1 py-2 px-4 bg-transparent border-none rounded-md text-sm font-medium cursor-pointer transition-all duration-200 outline-none appearance-none ${
|
||||
activeTab === "imports"
|
||||
? "bg-white text-black shadow-sm"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
onClick={() => setActiveTab("imports")}
|
||||
type="button"
|
||||
>
|
||||
@@ -184,35 +192,35 @@ function App() {
|
||||
|
||||
{/* Tab Content */}
|
||||
{activeTab === "save" ? (
|
||||
<div className="tab-content">
|
||||
<div className="flex flex-col gap-4 min-h-[200px]">
|
||||
{/* Current Page Info */}
|
||||
<div className="current-page">
|
||||
<div className="page-info">
|
||||
<h3 className="page-title">
|
||||
<div className="mb-0">
|
||||
<div className="bg-gray-50 p-3 rounded-md border border-gray-200">
|
||||
<h3 className="m-0 mb-1 text-sm font-semibold text-black overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{currentTitle || "Current Page"}
|
||||
</h3>
|
||||
<p className="page-url">{currentUrl}</p>
|
||||
<p className="m-0 text-xs text-gray-500 overflow-hidden text-ellipsis whitespace-nowrap">{currentUrl}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Selection */}
|
||||
<div className="project-section">
|
||||
<div className="mb-0">
|
||||
<button
|
||||
className="project-selector-btn"
|
||||
className="w-full bg-transparent border-none p-0 cursor-pointer text-left"
|
||||
onClick={handleShowProjectSelector}
|
||||
type="button"
|
||||
>
|
||||
<div className="project-selector-content">
|
||||
<span className="project-label">Save to project:</span>
|
||||
<div className="project-value">
|
||||
<span className="project-name">
|
||||
<div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg border border-gray-200 transition-colors duration-200 hover:bg-gray-200 hover:border-gray-300">
|
||||
<span className="text-sm font-medium text-gray-600">Save to project:</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-black overflow-hidden text-ellipsis whitespace-nowrap max-w-[120px]">
|
||||
{defaultProject
|
||||
? defaultProject.name
|
||||
: "Default Project"}
|
||||
</span>
|
||||
<svg
|
||||
aria-label="Select project"
|
||||
className="project-arrow"
|
||||
className="text-gray-500 flex-shrink-0 transition-transform duration-200 hover:text-gray-700 hover:translate-x-0.5"
|
||||
fill="none"
|
||||
height="16"
|
||||
stroke="currentColor"
|
||||
@@ -231,9 +239,9 @@ function App() {
|
||||
</div>
|
||||
|
||||
{/* Save Button at Bottom */}
|
||||
<div className="save-action">
|
||||
<div className="mt-auto pt-4">
|
||||
<button
|
||||
className="login-primary-btn"
|
||||
className="w-full py-3 px-6 bg-gray-700 text-white border-none rounded-3xl text-base font-medium cursor-pointer transition-colors duration-200 hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
disabled={saving}
|
||||
onClick={handleSaveCurrentPage}
|
||||
type="button"
|
||||
@@ -243,12 +251,12 @@ function App() {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="tab-content">
|
||||
<div className="flex flex-col gap-4 min-h-[200px]">
|
||||
{/* Import Actions */}
|
||||
<div className="import-actions">
|
||||
<div className="import-item">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<button
|
||||
className="chatgpt-btn"
|
||||
className="w-full py-3 px-3 bg-white text-black border border-gray-200 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center transition-colors duration-200 hover:bg-gray-50"
|
||||
onClick={() => {
|
||||
chrome.tabs.create({
|
||||
url: "https://chatgpt.com/#settings/Personalization",
|
||||
@@ -258,7 +266,7 @@ function App() {
|
||||
>
|
||||
<svg
|
||||
aria-label="ChatGPT Logo"
|
||||
className="chatgpt-logo"
|
||||
className="w-4.5 h-4.5 flex-shrink-0 mr-2"
|
||||
fill="currentColor"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -271,9 +279,9 @@ function App() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="import-item">
|
||||
<div className="flex flex-col gap-2">
|
||||
<button
|
||||
className="twitter-btn"
|
||||
className="w-full py-3 px-3 bg-white text-black border border-gray-200 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center transition-colors duration-200 outline-none appearance-none hover:bg-gray-50 focus:outline-none"
|
||||
onClick={() => {
|
||||
chrome.tabs.create({
|
||||
url: "https://x.com/i/bookmarks",
|
||||
@@ -283,7 +291,7 @@ function App() {
|
||||
>
|
||||
<svg
|
||||
aria-label="X Twitter Logo"
|
||||
className="twitter-logo"
|
||||
className="w-4.5 h-4.5 flex-shrink-0 mr-2"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -293,7 +301,7 @@ function App() {
|
||||
</svg>
|
||||
Import X Bookmarks
|
||||
</button>
|
||||
<p className="import-instructions">
|
||||
<p className="m-0 text-xs text-gray-500 leading-tight pl-1">
|
||||
Click on supermemory on top right to import bookmarks
|
||||
</p>
|
||||
</div>
|
||||
@@ -302,11 +310,11 @@ function App() {
|
||||
)}
|
||||
|
||||
{showProjectSelector && (
|
||||
<div className="project-selector">
|
||||
<div className="project-selector-header">
|
||||
<div className="absolute inset-0 bg-white rounded-lg z-[1000] shadow-xl flex flex-col">
|
||||
<div className="flex justify-between items-center p-4 border-b border-gray-200 text-base font-semibold text-black flex-shrink-0">
|
||||
<span>Select the Project</span>
|
||||
<button
|
||||
className="project-close-btn"
|
||||
className="bg-transparent border-none text-xl cursor-pointer text-gray-500 p-0 w-6 h-6 flex items-center justify-center hover:text-black"
|
||||
onClick={() => setShowProjectSelector(false)}
|
||||
type="button"
|
||||
>
|
||||
@@ -314,26 +322,28 @@ function App() {
|
||||
</button>
|
||||
</div>
|
||||
{loadingProjects ? (
|
||||
<div className="project-loading">Loading projects...</div>
|
||||
<div className="py-8 px-4 text-center text-gray-500 text-sm">Loading projects...</div>
|
||||
) : (
|
||||
<div className="project-list">
|
||||
<div className="flex-1 overflow-y-auto min-h-0">
|
||||
{projects.map((project) => (
|
||||
<button
|
||||
className={`project-item ${defaultProject?.id === project.id ? "selected" : ""}`}
|
||||
className={`flex justify-between items-center py-3 px-4 cursor-pointer transition-colors duration-200 border-b border-gray-100 bg-transparent border-none w-full text-left last:border-b-0 hover:bg-gray-50 ${
|
||||
defaultProject?.id === project.id ? "bg-blue-50" : ""
|
||||
}`}
|
||||
key={project.id}
|
||||
onClick={() => handleProjectSelect(project)}
|
||||
type="button"
|
||||
>
|
||||
<div className="project-item-info">
|
||||
<span className="project-item-name">
|
||||
<div className="flex flex-col flex-1 gap-0.5">
|
||||
<span className="text-sm font-medium text-black break-words leading-tight">
|
||||
{project.name}
|
||||
</span>
|
||||
<span className="project-item-count">
|
||||
<span className="text-xs text-gray-500">
|
||||
{project.documentCount} docs
|
||||
</span>
|
||||
</div>
|
||||
{defaultProject?.id === project.id && (
|
||||
<span className="project-item-check">✓</span>
|
||||
<span className="text-blue-600 font-bold text-base">✓</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
@@ -343,24 +353,24 @@ function App() {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="unauthenticated">
|
||||
<div className="login-intro">
|
||||
<h2 className="login-title">
|
||||
<div className="text-center py-2">
|
||||
<div className="mb-8">
|
||||
<h2 className="m-0 mb-4 text-sm font-normal text-black leading-tight">
|
||||
Login to unlock all chrome extension features
|
||||
</h2>
|
||||
|
||||
<ul className="features-list">
|
||||
<li>Save any page to your supermemory</li>
|
||||
<li>Import all your Twitter / X Bookmarks</li>
|
||||
<li>Import your ChatGPT Memories</li>
|
||||
<ul className="list-none p-0 m-0 text-left">
|
||||
<li className="py-1.5 text-sm text-black relative pl-5 before:content-['•'] before:absolute before:left-0 before:text-black before:font-bold">Save any page to your supermemory</li>
|
||||
<li className="py-1.5 text-sm text-black relative pl-5 before:content-['•'] before:absolute before:left-0 before:text-black before:font-bold">Import all your Twitter / X Bookmarks</li>
|
||||
<li className="py-1.5 text-sm text-black relative pl-5 before:content-['•'] before:absolute before:left-0 before:text-black before:font-bold">Import your ChatGPT Memories</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="login-actions">
|
||||
<p className="login-help">
|
||||
<div className="mt-8">
|
||||
<p className="m-0 mb-4 text-sm text-gray-500">
|
||||
Having trouble logging in?{" "}
|
||||
<button
|
||||
className="help-link"
|
||||
className="bg-transparent border-none text-blue-500 cursor-pointer underline text-sm p-0 hover:text-blue-700"
|
||||
onClick={() => {
|
||||
window.open("mailto:dhravya@supermemory.com", "_blank")
|
||||
}}
|
||||
@@ -371,7 +381,7 @@ function App() {
|
||||
</p>
|
||||
|
||||
<button
|
||||
className="login-primary-btn"
|
||||
className="w-full py-3 px-6 bg-gray-700 text-white border-none rounded-3xl text-base font-medium cursor-pointer transition-colors duration-200 hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
onClick={() => {
|
||||
chrome.tabs.create({
|
||||
url: import.meta.env.PROD
|
||||
|
||||
@@ -15,46 +15,6 @@
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
function Welcome() {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center p-8 bg-gradient-to-br from-gray-50 to-white">
|
||||
<div className="min-h-screen font-[Space_Grotesk,-apple-system,BlinkMacSystemFont,Segoe_UI,Roboto,sans-serif] flex items-center justify-center p-8 bg-gradient-to-br from-gray-50 to-white">
|
||||
<div className="max-w-4xl w-full text-center">
|
||||
{/* Header */}
|
||||
<div className="mb-12">
|
||||
@@ -17,12 +17,16 @@ function Welcome() {
|
||||
|
||||
{/* Features Section */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-semibold text-black mb-8">What can you do with supermemory?</h2>
|
||||
<h2 className="text-2xl font-semibold text-black mb-8"
|
||||
>What can you do with supermemory
|
||||
?</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
|
||||
<div className="text-3xl mb-4 block">💾</div>
|
||||
<h3 className="text-lg font-semibold text-black mb-3">Save Any Page</h3>
|
||||
<h3 className="text-lg font-semibold text-black mb-3"
|
||||
>Save Any Pag
|
||||
e</h3>
|
||||
<p className="text-sm text-gray-600 leading-snug">
|
||||
Instantly save web pages, articles, and content to your personal
|
||||
knowledge base
|
||||
@@ -31,7 +35,9 @@ function Welcome() {
|
||||
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
|
||||
<div className="text-3xl mb-4 block">🐦</div>
|
||||
<h3 className="text-lg font-semibold text-black mb-3">Import Twitter/X Bookmarks</h3>
|
||||
<h3 className="text-lg font-semibold text-black mb-3">
|
||||
Import Twitter/X Bookmarks
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 leading-snug">
|
||||
Bring all your saved tweets and bookmarks into one organized
|
||||
place
|
||||
@@ -40,7 +46,9 @@ function Welcome() {
|
||||
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
|
||||
<div className="text-3xl mb-4 block">🤖</div>
|
||||
<h3 className="text-lg font-semibold text-black mb-3">Import ChatGPT Memories</h3>
|
||||
<h3 className="text-lg font-semibold text-black mb-3">
|
||||
Import ChatGPT Memories
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 leading-snug">
|
||||
Keep your important AI conversations and insights accessible
|
||||
</p>
|
||||
@@ -48,7 +56,9 @@ function Welcome() {
|
||||
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
|
||||
<div className="text-3xl mb-4 block">🔍</div>
|
||||
<h3 className="text-lg font-semibold text-black mb-3">AI-Powered Search</h3>
|
||||
<h3 className="text-lg font-semibold text-black mb-3">
|
||||
AI-Powered Search
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 leading-snug">
|
||||
Find anything you've saved using intelligent semantic search
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user