unify styles

Expensify · Nov 28, 2023 · 9278179 · 9278179
1 parent 0aa97d3
commit 9278179
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 24 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -9,21 +9,6 @@ const pdfPreviewerContainerStyle: CSSProperties = {
     borderStyle: 'solid',
 };
 
-const buttonsContainer: CSSProperties = {
-    marginTop: 16,
-    display: 'flex',
-};
-
-const fileButtonStyle: CSSProperties = {
-    margin: '0 8px',
-    padding: '8px 16px',
-    fontSize: 18,
-    border: 0,
-    borderRadius: 16,
-    backgroundColor: '#03d47c',
-    cursor: 'pointer',
-};
-
 function App() {
     const [file, setFile] = useState<string | null>(null);
 
@@ -32,27 +17,37 @@ function App() {
             <h1 className="title">Hello, I am {ReactFastPDF.PackageName}!</h1>
 
             {file ? (
-                <PDFPreviewer
-                    file={file}
-                    pageMaxWidth={1000}
-                    isSmallScreen={false}
-                    containerStyle={pdfPreviewerContainerStyle}
-                />
+                <>
+                    <button
+                        className="button button_back"
+                        type="button"
+                        onClick={() => setFile(null)}
+                    >
+                        Back
+                    </button>
+
+                    <PDFPreviewer
+                        file={file}
+                        pageMaxWidth={1000}
+                        isSmallScreen={false}
+                        containerStyle={pdfPreviewerContainerStyle}
+                    />
+                </>
             ) : (
                 <>
                     <h3>Please choose a file for previewing:</h3>
 
-                    <div style={buttonsContainer}>
+                    <div className="buttons_container">
                         <button
-                            style={fileButtonStyle}
+                            className="button"
                             type="button"
                             onClick={() => setFile('example.pdf')}
                         >
                             example.pdf
                         </button>
 
                         <button
-                            style={fileButtonStyle}
+                            className="button"
                             type="button"
                             onClick={() => setFile('example_protected.pdf')}
                         >

diff --git a/example/src/index.css b/example/src/index.css
@@ -40,3 +40,25 @@ body {
 .react-pdf__Page {
     background-color: transparent !important;
 }
+
+.buttons_container {
+    margin-top: 16px;
+    display: flex;
+}
+
+.button {
+    margin: 0 8px;
+    padding: 8px 16px;
+    font-size: 18px;
+    border: 0;
+    border-radius: 16px;
+    background-color: #03d47c;
+    cursor: 'pointer';
+}
+
+.button_back {
+    position: absolute;
+    z-index: 1;
+    left: 16px;
+    top: 16px;
+}