namirasoft-account-react 1.4.353 → 1.4.355

package/src/components/NSAUserDialog.module.css

@@ -1,62 +1,67 @@
-.ns_figure {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 0;
-    color: #141b5c;
-
-    figcaption {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.5rem;
-    }
-}
-
-.ns_figure_placeholder {
-    width: 6rem;
-    height: 6rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    background-color: #141b5c;
-    span {
-        font-size: 1.75rem;
-        font-weight: 500;
-        word-spacing: -0.5rem;
-        color: #fff;
-    }
-}
-
-.ns_figure_title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    line-height: 1.75rem;
-}
-
-.ns_actions_wrapper {
-    display: flex;
-    flex-direction: column;
-}
-
-.ns_actions_wrapper .ns_link > a,
-.ns_actions_wrapper .ns_button {
-    box-shadow: none;
-    color: #141b5c !important;
-}
-
-.ns_actions_wrapper .ns_link > a:hover,
-.ns_actions_wrapper .ns_button:hover {
-    background-color: #b2bbd9;
-}
-
-.ns_user_id {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 600;
-    text-align: right;
-    color: rgba(3, 119, 255);
-    cursor: pointer;
+.ns_figure {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 0;
+    color: #141b5c;
+}
+
+.ns_figure>img {
+    border-radius: 50%;
+}
+
+.ns_figure figcaption {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.ns_figure_placeholder {
+    width: 6rem;
+    height: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #141b5c;
+}
+
+.ns_figure_placeholder span {
+    font-size: 1.75rem;
+    font-weight: 500;
+    word-spacing: -0.375rem;
+    color: #fff;
+}
+
+.ns_figure_title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.75rem;
+}
+
+.ns_actions_wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.ns_actions_wrapper .ns_link>a,
+.ns_actions_wrapper .ns_button {
+    box-shadow: none;
+    color: #141b5c !important;
+}
+
+.ns_actions_wrapper .ns_link>a:hover,
+.ns_actions_wrapper .ns_button:hover {
+    background-color: #b2bbd9;
+}
+
+.ns_user_id {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    text-align: right;
+    color: rgba(3, 119, 255);
+    cursor: pointer;
 }

package/src/components/NSAUserDialog.tsx

@@ -1,100 +1,111 @@
-import { NamirasoftAccountClient } from 'namirasoft-account-client';
-import { NSButton, NSCopy, NSDialog, NSDialogProps, NSLine, NSLink, NSLoading, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
-import { Component } from 'react';
-import { NSARouterMakerProps } from '../NSARouterMakerProps';
-import Styles from "./NSAUserDialog.module.css";
-
-export interface NSAUserDialogProps extends NSARouterMakerProps, NSDialogProps
-{
-    client: NamirasoftAccountClient
-}
-
-export class NSAUserDialog extends Component<NSAUserDialogProps>
-{
-    override render()
-    {
-        let user = this.props.account?.token_manager?.getUserData((u => u), null);
-        let content = null;
-        if (user == null)
-            content = <NSLoading />;
-        else
-        {
-            content = (
-                <div>
-                    <figure className={Styles.ns_figure}>
-                        {user.picture
-                            ?
-                            <img
-                                src={user.picture}
-                                width={96}
-                                height={96}
-                                alt="User Avatar"
-                            />
-                            :
-                            <div className={Styles.ns_figure_placeholder}>
-                                <span>
-                                    {((user.first_name?.[0] ?? "") + " " + (user.last_name?.[0] ?? "")).trim()}
-                                </span>
-                            </div>
-                        }
-                        <figcaption>
-                            <span className={Styles.ns_figure_title}>{`Hi ${user.first_name}!`}</span>
-                            <span>{user?.email}</span>
-                            <NSCopy id={user.id}>
-                                <p className={Styles.ns_user_id}>
-                                    {user.id}
-                                </p>
-                            </NSCopy>
-                        </figcaption>
-                    </figure>
-
-                    <NSSpace size={NSSpaceSizeType.MINI} />
-                    <NSLine />
-                    <NSSpace size={NSSpaceSizeType.MICRO} />
-
-                    <div className={Styles.ns_actions_wrapper}>
-                        <NSLink
-                            href="https://account.namirasoft.com/user/profile"
-                            target="_blank"
-                            title='Profile'
-                            classList={[Styles.ns_link]}
-                        />
-                        <NSLink
-                            href="https://cost.namirasoft.com/"
-                            target="_blank"
-                            title='Billing and Cost'
-                            classList={[Styles.ns_link]}
-                        />
-                        <NSLink
-                            href="https://account.namirasoft.com/setting/notification"
-                            target="_blank"
-                            title='Notificaton Setting'
-                            classList={[Styles.ns_link]}
-                        />
-                        <NSLink
-                            href="https://account.namirasoft.com/password/change"
-                            target="_blank"
-                            title='Change Password'
-                            classList={[Styles.ns_link]}
-                        />
-                        <NSButton
-                            onClick={{ action: () => this.props.client.logout() }}
-                            title='Log Out'
-                            classList={[Styles.ns_button]}
-                            icon={{
-                                src: "https://static.namirasoft.com/image/concept/logout/base.svg",
-                                alt: "Logout Icon"
-                            }}
-                        />
-                    </div>
-                </div>
-            );
-        }
-
-        return (
-            <NSDialog {...this.props}>
-                {content}
-            </NSDialog>
-        );
-    }
+import { NamirasoftAccountClient } from 'namirasoft-account-client';
+import { NSButton, NSCopy, NSDialog, NSDialogProps, NSLine, NSLink, NSLoading, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
+import { Component } from 'react';
+import { NSARouterMakerProps } from '../NSARouterMakerProps';
+import Styles from "./NSAUserDialog.module.css";
+
+export interface NSAUserDialogProps extends NSARouterMakerProps, NSDialogProps
+{
+    client: NamirasoftAccountClient
+}
+
+export class NSAUserDialog extends Component<NSAUserDialogProps>
+{
+    override render()
+    {
+        let user = this.props.account?.token_manager?.getUserData((u => u), null);
+        let content = null;
+        if (user == null)
+            content = <NSLoading />;
+        else
+        {
+            content = (
+                <div>
+                    <figure className={Styles.ns_figure}>
+                        {user.picture
+                            ?
+                            <img
+                                src={user.picture}
+                                width={96}
+                                height={96}
+                                alt="User Avatar"
+                            />
+                            :
+                            <div className={Styles.ns_figure_placeholder}>
+                                <span>
+                                    {((user.first_name?.[0] ?? "") + " " + (user.last_name?.[0] ?? "")).trim()}
+                                </span>
+                            </div>
+                        }
+                        <figcaption>
+                            <span className={Styles.ns_figure_title}>{`Hi ${user.first_name}!`}</span>
+                            <span>{user?.email}</span>
+                            <NSCopy id={user.id}>
+                                <p className={Styles.ns_user_id}>
+                                    {user.id}
+                                </p>
+                            </NSCopy>
+                        </figcaption>
+                    </figure>
+
+                    <NSSpace size={NSSpaceSizeType.MINI} />
+                    <NSLine />
+                    <NSSpace size={NSSpaceSizeType.MICRO} />
+
+                    <div className={Styles.ns_actions_wrapper}>
+                        <NSLink
+                            href="https://account.namirasoft.com/user/profile"
+                            target="_blank"
+                            classList={[Styles.ns_link]}
+                        >
+                            Profile
+                        </NSLink>
+                        <NSLink
+                            href="https://payment.namirasoft.com/"
+                            target="_blank"
+                            classList={[Styles.ns_link]}
+                        >
+                            Payment and Billing
+                        </NSLink>
+                        <NSLink
+                            href="https://cost.namirasoft.com/"
+                            target="_blank"
+                            classList={[Styles.ns_link]}
+                        >
+                            Cost and Usage
+                        </NSLink>
+                        <NSLink
+                            href="https://account.namirasoft.com/setting/notification"
+                            target="_blank"
+                            classList={[Styles.ns_link]}
+                        >
+                            Notificaton Settings
+                        </NSLink>
+                        <NSLink
+                            href="https://account.namirasoft.com/password/change"
+                            target="_blank"
+                            classList={[Styles.ns_link]}
+                        >
+                            Change Password
+                        </NSLink>
+                        <NSButton
+                            onClick={{ action: () => this.props.client.logout() }}
+                            title='Log Out'
+                            classList={[Styles.ns_button]}
+                            icon={{
+                                src: "https://static.namirasoft.com/image/concept/logout/blue.svg",
+                                alt: "Logout Icon"
+                            }}
+                        />
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <NSDialog {...this.props}>
+                {content}
+            </NSDialog>
+        );
+    }
 }

package/src/components/NSAWorkspaceListDialog.module.css

@@ -1,42 +1,42 @@
-.nsa_workspace_h2 {
-    color: rgba(3, 119, 255, 1);
-    text-align: center;
-    font-weight: 600;
-    font-size: 16px;
-    cursor: pointer;
-}
-
-.nsa_workspace_h6 {
-    color: rgba(20, 27, 92, 1);
-    text-align: center;
-    font-weight: 300;
-    font-size: 16px;
-    cursor: pointer;
-    margin: 0;
-}
-
-.nsa_workspace_list {
-    overflow-y: auto;
-    height: 320px;
-    width: 302px;
-}
-
-.nsa_workspace_border {
-    margin-top: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: left;
-    align-items: center;
-    gap: 8px;
-    border-radius: 8px;
-    border: 1px solid gray;
-    padding: 8px;
-    transition: all .2s ease-in-out;
-    flex-wrap: wrap;
-}
-
-.nsa_workspace_border:hover {
-    background-color: rgba(20, 27, 92, 0.3);
-    color: white;
-    cursor: pointer;
+.nsa_workspace_h2 {
+    color: rgba(3, 119, 255, 1);
+    text-align: center;
+    font-weight: 600;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.nsa_workspace_h6 {
+    color: rgba(20, 27, 92, 1);
+    text-align: center;
+    font-weight: 300;
+    font-size: 16px;
+    cursor: pointer;
+    margin: 0;
+}
+
+.nsa_workspace_list {
+    overflow-y: auto;
+    height: 320px;
+    width: 302px;
+}
+
+.nsa_workspace_border {
+    margin-top: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: center;
+    gap: 8px;
+    border-radius: 8px;
+    border: 1px solid gray;
+    padding: 8px;
+    transition: all .2s ease-in-out;
+    flex-wrap: wrap;
+}
+
+.nsa_workspace_border:hover {
+    background-color: rgba(20, 27, 92, 0.3);
+    color: white;
+    cursor: pointer;
 }