Merge pull request #118 from felleslosninger/profile-styling

styling: profile page and QR in card
felleslosninger · Aug 4, 2021 · 03b2186 · 03b2186
2 parents 8378423 + e18dc77
commit 03b2186
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 34 deletions.
diff --git a/wallet/wallet-app/components/frames/ProfileMenu.jsx b/wallet/wallet-app/components/frames/ProfileMenu.jsx
@@ -7,6 +7,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import jwtDecode from 'jwt-decode';
 import { Button, Text } from 'react-native-ui-lib';
 import { signIn } from '../../redux/SignedInSlice';
+import { getWalletID } from '../../utils/sign';
 
 /**
  * A profile site for administrativ changes on the profile
@@ -56,7 +57,7 @@ export default function ProfileMenuSlide() {
             Alert.alert('VARSEL', 'Er du sikker på at du vil slette brukeren?', [
                 {
                     text: 'Cancel',
-                    onPress: () => navigation.navigate('Oversikt'),
+                    onPress: () => navigation.navigate('Profil'),
                     style: 'cancel',
                 },
                 { text: 'OK', onPress: () => deleteUserPressed() },
@@ -71,24 +72,50 @@ export default function ProfileMenuSlide() {
         <SafeAreaView style={{ display: 'flex', flexDirection: 'column', flexWrap: 'nowrap', alignContent: 'center' }}>
             <View style={{ alignItems: 'flex-end', marginRight: 20, marginTop: 20 }}>
                 <Button
-                    label="Slett bruker"
-                    backgroundColor="rgb(194,19,44)"
+                    label="Logg ut"
+                    backgroundColor="rgb(0,98,184)"
                     size={Button.sizes.small}
-                    onPress={buttonAlert}
+                    onPress={() => dispatch(signIn(false))}
                     text90
                 />
             </View>
+            <View style={styles.container} marginTop={100}>
+                <Icon name="user-circle" size={220} color="rgb(30,46,60)" />
+            </View>
             <View>
-                <View style={styles.container} marginTop={40}>
-                    <Icon name="user" size={200} color="rgb(30,46,60)" />
-                </View>
                 <Text style={styles.textstyle}>Kari Nordman</Text>
             </View>
-            <Text style={styles.issuerText}>Du har grunnidentitet utstedt fra: {baseIdIssuer}</Text>
+
+            <Text text90 style={{ marginLeft: 10, alignSelf: 'center', marginTop: 140 }}>
+                ID: {baseIdIssuer.substring(baseIdIssuer.length - 36)}
+            </Text>
+            <View
+                style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexWrap: 'nowrap',
+                    marginTop: 1,
+                    alignSelf: 'center',
+                }}>
+                <Icon name="check" size={10} color="rgb(30,46,60)" />
+
+                <Text text100 style={{ marginLeft: 4, marginTop: -3 }}>
+                    Utstedt av: {baseIdIssuer.substring(0, baseIdIssuer.length - 36)}
+                </Text>
+            </View>
+            {/**
+             *  Du har grunnidentitet utstedt fra: {baseIdIssuer}
+             */}
             <View width={320} style={{ alignSelf: 'center' }}>
-                <Button backgroundColor="rgb(0,98,184)" onPress={() => dispatch(signIn(false))}>
-                    <Text style={styles.buttonTextlogOut}>Logg ut</Text>
-                </Button>
+                <Button
+                    label="Slett bruker"
+                    color="rgb(194,19,44)"
+                    backgroundColor="transparent"
+                    style={{ marginTop: 20 }}
+                    size={Button.sizes.small}
+                    onPress={buttonAlert}
+                    text90
+                />
             </View>
         </SafeAreaView>
     );
@@ -98,10 +125,12 @@ const styles = StyleSheet.create({
     container: {
         paddingTop: 30,
         alignSelf: 'center',
+        paddingHorizontal: 20,
     },
     textstyle: {
-        fontSize: 20,
+        fontSize: 30,
         paddingHorizontal: 20,
+        marginTop: 20,
         alignSelf: 'center',
         color: 'rgb(30,46,60)',
     },

diff --git a/wallet/wallet-app/components/frames/VerifierLogFrame.jsx b/wallet/wallet-app/components/frames/VerifierLogFrame.jsx
@@ -58,13 +58,22 @@ export default function VerifierLogFrame({ route }) {
                     ]}
                     style={{ padding: 30, paddingTop: 0, paddingBottom: 0 }}
                 />
+
+                <Card.Section
+                    content={[{ text: 'Del med QR-kode: ', text70: true, grey40: true }]}
+                    style={{ padding: 30, paddingTop: 50, paddingBottom: 10 }}
+                />
+                <Card style={{ alignSelf: 'center', marginBottom: 20 }}>
+                    <CreateQR content={route.params.props.name} />
+                </Card>
+
                 {shared.filter((share) => share.credential_id === route.params.props.id) ? (
                     <Card.Section
                         content={[
                             {
                                 text: 'Beviset er ikke delt',
-                                text80: true,
-                                grey30: true,
+                                text100: true,
+                                grey40: true,
                             },
                         ]}
                         style={{ padding: 30, paddingTop: 10, paddingBottom: 0 }}
@@ -76,32 +85,27 @@ export default function VerifierLogFrame({ route }) {
                                 text: `Beviset er delt med: ${shared
                                     .filter((share) => share.credential_id === route.params.props.id)
                                     .map((share) => share.verifier)}`,
-                                text80: true,
-                                grey30: true,
+                                text100: true,
+                                grey40: true,
                             },
                         ]}
                         style={{ padding: 30, paddingTop: 10, paddingBottom: 0 }}
                     />
                 )}
-                <Card.Section
-                    content={[{ text: 'Del beviset med QR-kode: ', text80: true, grey30: true }]}
-                    style={{ padding: 30, paddingTop: 10, paddingBottom: 5 }}
+
+                <Button
+                    label="Slett bevis"
+                    color="rgb(194,19,44)"
+                    backgroundColor="white"
+                    size={Button.sizes.small}
+                    style={{ marginTop: 100, marginBottom: 15 }}
+                    onPress={() => {
+                        // dispatch(removeCredential(props.id));
+                        removeItemValue(route.params.props.id);
+                        navigation.navigate('Oversikt');
+                    }}
+                    text90
                 />
-                <View style={{ alignSelf: 'center', paddingBottom: 20 }}>
-                    <CreateQR content={route.params.props.name} />
-                    <Button
-                        label="Slett bevis"
-                        color="rgb(194,19,44)"
-                        backgroundColor="white"
-                        size={Button.sizes.small}
-                        style={{ marginTop: 150 }}
-                        onPress={() => {
-                            removeItemValue(route.params.props.id);
-                            navigation.navigate('Oversikt');
-                        }}
-                        text90
-                    />
-                </View>
             </Card>
         </SafeAreaView>
     );