Skip to content

Commit

Permalink
Clicking on reply should scroll to the original message
Browse files Browse the repository at this point in the history
  • Loading branch information
gdbroman committed Apr 4, 2023
1 parent 187d18c commit c0156bd
Show file tree
Hide file tree
Showing 99 changed files with 6,959 additions and 75 deletions.
2 changes: 2 additions & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ module.exports = {
const modules = [
path.resolve(__dirname, '../app/src'),
path.resolve(__dirname, '../shared/src'),
path.resolve(__dirname, '../onboarding/src'),
path.resolve(__dirname, '../lib/conduit/src'),
path.resolve(__dirname, '../lib/design-system/src'),
path.resolve(__dirname, '../lib/presence/src'),
Expand All @@ -19,6 +20,7 @@ module.exports = {
stories: [
"../app/src/**/*.stories.@(js|jsx|ts|tsx)",
"../shared/src/**/*.stories.@(js|jsx|ts|tsx)",
"../onboarding/src/**/*.stories.@(js|jsx|ts|tsx)",
"../lib/conduit/src/**/*.stories.@(js|jsx|ts|tsx)",
"../lib/design-system/src/**/*.stories.@(js|jsx|ts|tsx)",
"../lib/presence/src/**/*.stories.@(js|jsx|ts|tsx)",
Expand Down
2 changes: 1 addition & 1 deletion app/src/os/services/identity/auth.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { AuthShip, AuthShipType, AuthStore, AuthStoreType } from './auth.model';
import { getCookie } from '../../lib/shipHelpers';
import { EncryptedStore } from '../../lib/encryptedStore';
import { ThemeSnapshotType } from 'renderer/logic/theme';
import { defaultTheme } from '@holium/shared';
import { defaultTheme } from '../theme.model';

export type ShipCredentials = {
// needed to refresh cookie when stale (403)
Expand Down
39 changes: 28 additions & 11 deletions app/src/os/services/theme.model.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,36 @@
import { Instance, types, applySnapshot } from 'mobx-state-tree';
import { defaultTheme as dt } from '@holium/shared';

export const defaultTheme = {
id: 'default',
mode: 'light',
backgroundColor: '#C4C3BF',
accentColor: '#4E9EFD',
inputColor: '#FFFFFF',
dockColor: '#FFFFFF',
iconColor: '#CECECC',
textColor: '#333333',
windowColor: '#FFFFFF',
wallpaper:
'https://images.unsplash.com/photo-1622547748225-3fc4abd2cca0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=100',
mouseColor: '#4E9EFD',
};

export const ThemeModel = types
.model('ThemeModel', {
id: types.identifier,
mode: types.optional(types.enumeration(['light', 'dark']), dt.mode),
backgroundColor: types.optional(types.string, dt.backgroundColor),
accentColor: types.optional(types.string, dt.accentColor),
inputColor: types.optional(types.string, dt.inputColor),
dockColor: types.optional(types.string, dt.dockColor),
iconColor: types.optional(types.string, dt.iconColor),
textColor: types.optional(types.string, dt.textColor),
windowColor: types.optional(types.string, dt.windowColor),
wallpaper: types.optional(types.string, dt.wallpaper),
mouseColor: types.optional(types.string, dt.mouseColor),
mode: types.optional(
types.enumeration(['light', 'dark']),
defaultTheme.mode
),
backgroundColor: types.optional(types.string, defaultTheme.backgroundColor),
accentColor: types.optional(types.string, defaultTheme.accentColor),
inputColor: types.optional(types.string, defaultTheme.inputColor),
dockColor: types.optional(types.string, defaultTheme.dockColor),
iconColor: types.optional(types.string, defaultTheme.iconColor),
textColor: types.optional(types.string, defaultTheme.textColor),
windowColor: types.optional(types.string, defaultTheme.windowColor),
wallpaper: types.optional(types.string, defaultTheme.wallpaper),
mouseColor: types.optional(types.string, defaultTheme.mouseColor),
})
.actions((self) => ({
setTheme(theme: any) {
Expand Down
4 changes: 1 addition & 3 deletions app/src/renderer/logic/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,16 @@ import { OSActions } from './actions/os';
import { ShipModels } from 'os/services/ship/ship.service';
import { FriendsStore } from 'os/services/ship/models/friends';
import { CourierStore } from 'os/services/ship/models/courier';
// import { NotificationStore } from 'os/services/ship/models/notifications';
import {
NotificationStore,
NotificationStoreType,
} from 'os/services/spaces/models/beacon';
// import { LiveRoom } from 'renderer/apps/store';
import { VisaModel } from 'os/services/spaces/models/visas';
import { ThemeStore } from './theme';
import { watchOnlineStatus } from './lib/offline';
import { BulletinStore } from 'os/services/spaces/models/bulletin';
import { AuthActions } from './actions/auth';
import { defaultTheme } from '@holium/shared';
import { defaultTheme } from '../../os/services/theme.model';

const Services = types
.model('ServicesStore', {
Expand Down
25 changes: 14 additions & 11 deletions app/src/renderer/logic/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { darken, lighten, rgba } from 'polished';
import { bgIsLightOrDark, toRgbaString } from '../../os/lib/color';
import { LoaderModel } from '../../os/services/common.model';
import { toJS } from 'mobx';
import { defaultTheme as dt } from '@holium/shared';
import { defaultTheme } from '../../os/services/theme.model';

export const genCSSVariables = (theme: ThemeType) => {
/**
Expand Down Expand Up @@ -116,16 +116,19 @@ const generateColors = (baseColor: string, bgLuminosity: 'light' | 'dark') => {
export const Theme = types
.model('Theme', {
id: types.identifier,
mode: types.optional(types.enumeration(['light', 'dark']), dt.mode),
backgroundColor: types.optional(types.string, dt.backgroundColor),
accentColor: types.optional(types.string, dt.accentColor),
inputColor: types.optional(types.string, dt.inputColor),
dockColor: types.optional(types.string, dt.dockColor),
iconColor: types.optional(types.string, dt.iconColor),
textColor: types.optional(types.string, dt.textColor),
windowColor: types.optional(types.string, dt.windowColor),
wallpaper: types.optional(types.string, dt.wallpaper),
mouseColor: types.optional(types.string, dt.mouseColor),
mode: types.optional(
types.enumeration(['light', 'dark']),
defaultTheme.mode
),
backgroundColor: types.optional(types.string, defaultTheme.backgroundColor),
accentColor: types.optional(types.string, defaultTheme.accentColor),
inputColor: types.optional(types.string, defaultTheme.inputColor),
dockColor: types.optional(types.string, defaultTheme.dockColor),
iconColor: types.optional(types.string, defaultTheme.iconColor),
textColor: types.optional(types.string, defaultTheme.textColor),
windowColor: types.optional(types.string, defaultTheme.windowColor),
wallpaper: types.optional(types.string, defaultTheme.wallpaper),
mouseColor: types.optional(types.string, defaultTheme.mouseColor),
})
.views((self) => ({
get values() {
Expand Down
4 changes: 2 additions & 2 deletions app/src/renderer/system/updater/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ const StartingDownload = (props: StartingDownloadProps) => {
alignItems="center"
>
<Flex width={308}>
<ProgressBar percentage={0} progressColor="#F08735" />
<ProgressBar percentages={[0]} progressColors={['brand']} />
</Flex>
<Flex justifyContent="space-between" width={308} alignItems="flex-start">
<Text.Custom fontSize={2} fontWeight={300} opacity={0.5}>
Expand Down Expand Up @@ -248,7 +248,7 @@ const UpdateStats = (props: UpdateStatsProps) => {
alignItems="center"
>
<Flex width={308}>
<ProgressBar percentage={stats.percent} progressColor="#F08735" />
<ProgressBar percentages={[stats.percent]} progressColors={['brand']} />
</Flex>
<Flex justifyContent="space-between" width={308} alignItems="flex-start">
<Text.Custom fontSize={2} fontWeight={300} opacity={0.5}>
Expand Down
4 changes: 4 additions & 0 deletions lib/design-system/src/general/Icon/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@ export const paths = {
Attachment: (
<path d="M14.8278 7.75701L9.1718 13.414C9.07629 13.5063 9.00011 13.6166 8.9477 13.7386C8.89529 13.8606 8.8677 13.9918 8.86655 14.1246C8.86539 14.2574 8.8907 14.3891 8.94098 14.512C8.99126 14.6349 9.06551 14.7465 9.1594 14.8404C9.2533 14.9343 9.36495 15.0086 9.48784 15.0588C9.61074 15.1091 9.74242 15.1344 9.8752 15.1333C10.008 15.1321 10.1392 15.1045 10.2612 15.0521C10.3832 14.9997 10.4936 14.9235 10.5858 14.828L16.2428 9.17201C16.8055 8.60935 17.1216 7.84623 17.1216 7.05051C17.1216 6.25479 16.8055 5.49167 16.2428 4.92901C15.6801 4.36635 14.917 4.05026 14.1213 4.05026C13.3256 4.05026 12.5625 4.36635 11.9998 4.92901L6.3428 10.586C5.86887 11.0481 5.49143 11.5998 5.23236 12.2089C4.97328 12.818 4.83774 13.4726 4.8336 14.1345C4.82945 14.7964 4.95678 15.4526 5.2082 16.0649C5.45961 16.6773 5.83012 17.2336 6.29821 17.7016C6.76631 18.1696 7.32268 18.5401 7.93505 18.7914C8.54742 19.0427 9.20361 19.17 9.86553 19.1657C10.5275 19.1615 11.182 19.0258 11.7911 18.7667C12.4002 18.5075 12.9517 18.13 13.4138 17.656L19.0708 12L20.4848 13.414L14.8278 19.071C14.1778 19.7211 13.406 20.2367 12.5567 20.5885C11.7074 20.9403 10.7971 21.1214 9.8778 21.1214C8.9585 21.1214 8.0482 20.9403 7.19888 20.5885C6.34955 20.2367 5.57784 19.7211 4.9278 19.071C4.27776 18.421 3.76211 17.6493 3.41031 16.7999C3.05851 15.9506 2.87744 15.0403 2.87744 14.121C2.87744 13.2017 3.05851 12.2914 3.41031 11.4421C3.76211 10.5928 4.27776 9.82105 4.9278 9.17101L10.5858 3.51501C11.5288 2.60422 12.7918 2.10025 14.1028 2.11164C15.4138 2.12303 16.6679 2.64888 17.5949 3.57592C18.5219 4.50296 19.0478 5.75702 19.0592 7.068C19.0706 8.37899 18.5666 9.642 17.6558 10.585L11.9998 16.244C11.7211 16.5226 11.3903 16.7436 11.0263 16.8943C10.6622 17.0451 10.272 17.1227 9.87794 17.1226C9.4839 17.1226 9.09372 17.0449 8.72969 16.8941C8.36566 16.7432 8.0349 16.5222 7.7563 16.2435C7.4777 15.9648 7.25671 15.634 7.10596 15.27C6.95521 14.9059 6.87764 14.5157 6.87769 14.1217C6.87774 13.7276 6.9554 13.3374 7.10623 12.9734C7.25707 12.6094 7.47813 12.2786 7.7568 12L13.4138 6.34301L14.8278 7.75701Z" />
),
AtSign: (
<path d="M48.965 50.88H48.72C46.35 58.61 41.685 62.475 34.735 62.475C30.285 62.475 26.705 60.835 23.99 57.555C21.28 54.275 19.92 49.855 19.92 44.305C19.92 36.965 21.795 30.865 25.545 26.01C29.295 21.155 34.225 18.725 40.33 18.725C42.67 18.725 44.755 19.325 46.59 20.53C48.425 21.73 49.605 23.245 50.12 25.06H50.315C50.38 24.15 50.54 22.285 50.8 19.455H56.89C55.36 37.355 54.6 46.465 54.6 46.79C54.6 53.515 56.53 56.875 60.4 56.875C63.91 56.875 66.825 54.975 69.145 51.175C71.465 47.375 72.63 42.455 72.63 36.415C72.63 27.485 69.805 20.19 64.155 14.54C58.505 8.89 50.675 6.065 40.67 6.065C31.025 6.065 23.05 9.445 16.75 16.2C10.45 22.955 7.30001 31.4 7.30001 41.535C7.30001 51.505 10.295 59.555 16.29 65.675C22.285 71.795 30.365 74.86 40.53 74.86C48.55 74.86 55.405 73.525 61.09 70.865V76.905C55.475 79.3 48.46 80.5 40.05 80.5C28.23 80.5 18.705 76.935 11.475 69.805C4.24501 62.675 0.63501 53.345 0.63501 41.815C0.63501 29.925 4.43001 20.07 12.01 12.24C19.595 4.415 29.28 0.5 41.07 0.5C52.11 0.5 61.26 3.78 68.5 10.34C75.74 16.9 79.365 25.46 79.365 36.015C79.365 43.745 77.46 50.09 73.64 55.04C69.82 59.995 65.17 62.47 59.68 62.47C52.57 62.475 48.995 58.61 48.965 50.88ZM40.245 24.375C36.22 24.375 32.96 26.295 30.475 30.125C27.99 33.955 26.75 38.715 26.75 44.4C26.75 48.235 27.585 51.255 29.26 53.46C30.935 55.67 33.165 56.775 35.96 56.775C39.985 56.775 43.18 54.77 45.535 50.76C47.885 46.745 49.06 41.425 49.06 34.8C49.06 27.85 46.12 24.375 40.245 24.375Z" />
),
Emoji: (
<path d="M12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2ZM12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4V4ZM12 11C14 11 15.667 11.333 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C8.333 11.333 10 11 12 11ZM8.5 7C9.07633 6.99988 9.63499 7.19889 10.0815 7.56335C10.5279 7.9278 10.8347 8.43532 10.95 9H6.05C6.16527 8.43532 6.47209 7.9278 6.91855 7.56335C7.36501 7.19889 7.92367 6.99988 8.5 7V7ZM15.5 7C16.0763 6.99988 16.635 7.19889 17.0815 7.56335C17.5279 7.9278 17.8347 8.43532 17.95 9H13.05C13.1653 8.43532 13.4721 7.9278 13.9185 7.56335C14.365 7.19889 14.9237 6.99988 15.5 7V7Z" />
),
Expand Down Expand Up @@ -378,6 +381,7 @@ export const paths = {
ChevronRight: (
<path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" />
),
Circle: <circle cx="12" cy="12" r="12" />,
RoomSpeaker: (
<g>
<rect x="1" y="10" width="2" height="5" rx="1" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ export default {

export const Default: ComponentStory<typeof ProgressBar> = () => (
<Flex flexDirection="column" width="300px">
<ProgressBar percentage={50} />
<ProgressBar percentages={[50]} />
</Flex>
);
47 changes: 27 additions & 20 deletions lib/design-system/src/general/ProgressBar/ProgressBar.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { FC } from 'react';
import styled from 'styled-components';
import { Box, BoxProps } from '../Box/Box';
import { ColorProps, colorStyle, ColorVariants } from '../../util/colors';

const Bar = styled(Box)`
position: relative;
background-color: rgba(var(--rlm-input-rgba));
border: 1px solid rgba(var(--rlm-border-rgba));
height: 12px;
Expand All @@ -13,29 +14,35 @@ const Bar = styled(Box)`
align-items: center;
`;

const Progress = styled(Box)`
const Progress = styled(Box)<ColorProps>`
height: 8px;
border-radius: 4px;
background-color: ${(props) =>
props.background || 'rgba(var(--rlm-accent-rgba))'};
background-color: rgba(var(--rlm-accent-rgba));
${colorStyle};
`;

type ProgressBarProps = {
percentage: number; // 1-100
progressColor?: string;
percentages: number[];
progressColors?: ColorVariants[];
} & BoxProps;

export const ProgressBar: FC<ProgressBarProps> = (props: ProgressBarProps) => {
const { percentage, progressColor } = props;

return (
<Bar>
<Progress
background={progressColor}
initial={{ width: '0%' }}
animate={{ width: `${percentage}%` }}
transition={{ duration: 0.5, default: { ease: 'linear' } }}
/>
</Bar>
);
};
export const ProgressBar = ({
percentages,
progressColors,
}: ProgressBarProps) => (
<Bar>
{percentages
.sort()
.reverse()
.map((percentage, index) => (
<Progress
key={`progress-${index}`}
bg={progressColors?.[index]}
style={{ position: 'absolute', left: 0, zIndex: index }}
initial={{ width: '0%' }}
animate={{ width: `${percentage}%` }}
transition={{ duration: 0.5, default: { ease: 'linear' } }}
/>
))}
</Bar>
);
2 changes: 1 addition & 1 deletion lib/design-system/src/navigation/Menu/MenuItemDivider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ type Props = {
export const MenuItemDivider = styled.hr<Props>`
border: 0;
height: 1px;
margin: 4px 8px;
margin: 8px;
background: ${({ textColor }) => textColor || 'var(--rlm-text-color)'};
opacity: 0.2;
`;
4 changes: 4 additions & 0 deletions lib/design-system/src/util/strings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,7 @@ export const pluralize = (word: string, amount: number) => {
export const capitalizeFirstLetter = (string: string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
};

const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;

export const isValidEmail = (email: string) => emailRegex.test(email);
3 changes: 3 additions & 0 deletions onboarding/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# @holium/onboarding

The onboarding flow at https://hosted.holium.com.
5 changes: 5 additions & 0 deletions onboarding/next-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
18 changes: 18 additions & 0 deletions onboarding/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/** @type {import('next').NextConfig} */
const withPreconstruct = require('@preconstruct/next');

const nextConfig = {
compiler: {
styledComponents: true,
},
reactStrictMode: true,
publicRuntimeConfig: {
API_URL: process.env.API_URL,
API_HEADERS_VERSION: process.env.API_HEADERS_VERSION,
API_HEADERS_CLIENT_ID: process.env.API_HEADERS_CLIENT_ID,
STRIPE_KEY: process.env.STRIPE_KEY,
AMPLITUDE_API_KEY: process.env.AMPLITUDE_API_KEY,
},
};

module.exports = withPreconstruct(nextConfig);
25 changes: 25 additions & 0 deletions onboarding/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"name": "@holium/onboarding",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"devDependencies": {
"@types/node": "^18.15.3",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@preconstruct/next": "^4.0.0"
},
"dependencies": {
"@amplitude/analytics-browser": "^1.9.1",
"@stripe/react-stripe-js": "^2.1.0",
"@stripe/stripe-js": "^1.51.0",
"next": "^13.2.4",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
Binary file added onboarding/public/favicon.ico
Binary file not shown.
67 changes: 67 additions & 0 deletions onboarding/src/components/Page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { useEffect, ReactNode } from 'react';
import { track } from '@amplitude/analytics-browser';
import NextHead from 'next/head';
import { Rubik } from 'next/font/google';
import styled from 'styled-components';
import { useToggle } from '@holium/design-system';
import { api } from '../util/api';
import { useNavigation } from '../util/useNavigation';

const Main = styled.main`
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
`;

const rubik = Rubik({ subsets: ['latin'], weight: 'variable' });

type Props = {
title: string;
isProtected?: boolean;
children: ReactNode;
};

export const Page = ({ title, isProtected = false, children }: Props) => {
const { goToPage, logout } = useNavigation();
const authenticated = useToggle(false);

useEffect(() => {
track(title);
});

useEffect(() => {
if (!isProtected) return;

const refreshAndStoreToken = async (token: string) => {
try {
const response = await api.refreshToken(token);
localStorage.setItem('token', response.token);
authenticated.toggleOn();
} catch (error) {
console.error(error);
logout();
}
};

const token = localStorage.getItem('token');

if (!token) goToPage('/');
else refreshAndStoreToken(token);
}, [isProtected]);

return (
<>
<NextHead>
<title>{title}</title>
<meta name="description" content="Get on the Holium network." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</NextHead>
<Main className={rubik.className}>
{isProtected ? (authenticated.isOn ? children : null) : children}
</Main>
</>
);
};
14 changes: 14 additions & 0 deletions onboarding/src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import type { AppProps } from 'next/app';
import * as Amplitude from '@amplitude/analytics-browser';
import { constants } from '../util/constants';
import '../style/app.css';

Amplitude.init(constants.AMPLITUDE_API_KEY, undefined, {
trackingOptions: {
ipAddress: false,
},
});

export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
Loading

0 comments on commit c0156bd

Please sign in to comment.